使用 JavaScript 的 LocalStorage API 管理键值存储
5.00/5 (1投票)
我们演示了如何处理键值对以及如何使用 JavaScript 的 localStorage API 管理键值存储。
本文摘自书籍《信息管理 - 信息建模与数据库导论》。
在键值存储中，信息项由键值对组成，例如电话号码目录条目 ⟨"Bob", "(732) 516-8970"⟩ 或英德翻译表中的一行 ⟨"my car", "mein Auto"⟩。
著名的键值存储管理系统包括 Redis、Oracle Berkeley DB 以及 Web 编程语言 JavaScript 内置的localStorage。
键值对中的键必须是唯一的。通常，键是字符串。但是，键值数据库管理系统（DBMS）可能允许任何由 DBMS 支持的值（字符串、数字、对象引用等）作为键。通常，键值对中的值可以是任何由 DBMS 支持的值。
我们演示了如何处理键值对以及如何使用 JavaScript 管理键值存储，JavaScript 提供了一个名为 `localStorage` 的内置对象，允许以以下方式存储键值对：
localStorage["Bob Jennings"] = "(732) 516-8970";
JavaScript 程序在 HTML 定义的网页上下文中加载和执行。在我们的键值存储项目中，我们将 JavaScript 代码嵌入到 HTML 文件index.html、add.html、update.html 和delete.html 中，分别对应数据管理操作检索/列出所有、创建/添加、更新和删除。所有这些 HTML 文件都包含相同的导航菜单（在 `nav` 元素中），允许用户转到任何这些页面来执行相应的数据管理操作。
2.1. 检索所有键值对并在表中列出它们
以下 HTML 代码包含一个标题（`h1` 元素）、一个将通过 JavaScript 代码填充的空表、一个导航菜单（在 `nav` 元素中）以及一个包含 JavaScript 代码的 `script` 元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Phone Number Directory</title>
</head>
<body>
<h1>Phone Number Directory</h1>
<table>
<tbody id="directory"></tbody>
</table>
<hr/>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="add.html">Add an entry</a></li>
<li><a href="update.html">Update an entry</a></li>
<li><a href="delete.html">Delete an entry</a></li>
</ul>
</nav>
<script>
...
</script>
</body>
</html>
在我们数据管理应用的这个“主页”上，当前存储的键值对将从 `localStorage` 中检索并显示为表行。如果 `localStorage` 为空，则会创建四个测试数据键值对并添加到存储中。这是通过以下 JavaScript 代码完成的，该代码构成了 `script` 元素的内容：
<script>
// get a handle for accessing the "directory" table body element
let tableBodyEl = document.getElementById("directory");
// add some key-value pairs if the store is empty
if (localStorage.length === 0) {
localStorage["Bob Jennings"] = "(732) 516-8970";
localStorage["Jane Anselm"] = "(732) 516-4301";
localStorage["Tara Helms"] = "(504) 972-3381";
localStorage["Tom Miller"] = "(282) 664-9357";
}
// show the contents of the store
for (let key of Object.keys( localStorage)) {
let row = tableBodyEl.insertRow();
row.insertCell().textContent = key;
row.insertCell().textContent = localStorage[key];
}
</script>
练习：打开你选择的文本编辑器（例如 NotePad++）。首先将上面的 HTML 代码复制并粘贴到你的编辑器中，然后将 JavaScript 代码添加到 `script` 元素中。创建一个文件夹（例如，命名为“KeyValueStoreExample”），并将编辑器窗口中的内容保存到此文件夹中，文件名为“index.html”。然后转到该文件夹（例如，使用 Windows 资源管理器），然后在浏览器中打开“index.html”文件。你应该会看到一个包含 4 个电话目录条目的页面，如上面的表 1-1 所示。
2.2. 在用户界面中添加键值对
以下 HTML 代码包含一个 `form` 元素（而不是一个表），用于允许用户在用户界面中输入新的键值对数据。导航菜单（在 `nav` 元素中）与上面相同，因此省略。
基于表单的用户界面包括两个带标签的输入字段（名为“key”和“value”）和一个保存按钮。每个用户界面元素都包含在一个 HTML `p` 元素中，该元素为其定义了一个布局块。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Phone Number Directory</title>
</head>
<body>
<h1>Phone Number Directory</h1>
<h2>Add an entry</h2>
<form>
<p><label>Name: <input name="key"/></label></p>
<p><label>Phone no.: <input name="value"/></label></p>
<p><button type="button" onclick="save()">Save</button></p>
</form>
<hr/>
<nav>...</nav>
<script>
function save() {
let formEl = document.forms[0]; // the 1st form on the page
localStorage[formEl.key.value] = formEl.value.value;
}
</script>
</body>
</html>
该 `script` 元素仅包含 `save` 函数的 JavaScript 代码，该函数将表单字段“key”和“value”中输入的键值对添加到 `localStorage` 数据库。
练习：将 HTML 代码（包括带有其 JavaScript 代码的 `script` 元素）复制并粘贴到一个新的编辑器窗口中。不要忘记插入前一个子节中 `nav` 元素的内容。然后将编辑器窗口中的内容保存到你的示例文件夹中，文件名为“add.html”。然后，在浏览器中打开“add.html”文件。你应该会看到一个包含用户界面的页面，如下面的图 2-1 所示。添加一个姓名和电话号码，然后点击保存按钮。然后单击菜单中的主页以检查你的新键值对是否已添加到存储中。
2.3. 删除键值对
为了让用户能够从存储中删除键值对条目，用户界面必须提供一种选择要删除的条目的机制。为此，HTML 提供了 `select` 元素，该元素被渲染为一个可选字段，可以展开为一个可选项列表。
删除用户界面包括一个带标签的选定字段（名为“key”）和一个删除按钮。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Phone Number Directory</title>
</head>
<body>
<h1>Phone Number Directory</h1>
<h2>Delete an entry</h2>
<form>
<p><label>Name: <select name="key"></select></label></p>
<p><button type="button" onclick="destroy()">Delete</button></p>
</form>
<hr/>
<nav>...</nav>
<script>...</script>
</body>
</html>
以下 `script` 元素包含用于使用 `option` 元素填充选定列表的 JavaScript 代码以及 `destroy` 函数的代码，该函数从 `localStorage` 存储和选定列表中删除选定的键值对。
<script>
// get a handle for accessing the form element
let formEl = document.forms[0];
// get a handle for accessing the "key" selection field
let selectEl = formEl.key;
// fill selection list with options
for (let key of Object.keys( localStorage)) {
let optionEl = document.createElement("option");
optionEl.text = key;
selectEl.add( optionEl, null);
}
function destroy() {
// delete from key-value store
localStorage.removeItem( selectEl.value);
// delete also from selection list
selectEl.remove( selectEl.selectedIndex);
}
</script>
练习：将 HTML 代码复制并粘贴到一个新的编辑器窗口中。不要忘记插入 `nav` 元素（来自上面的代码列表）和 `script` 元素的内容。将生成的 UI 页面保存到你的示例文件夹中，文件名为“delete.html”。然后，在浏览器中打开“delete.html”文件。你应该会看到一个包含用户界面的页面，如下面的图 2-2 所示。选择一个姓名，然后点击删除按钮。然后单击菜单中的主页以检查所选的键值对是否已从存储中删除。
2.4. 更新键值对
Update 用户界面包括一个带标签的选定字段（名为“key”）用于选择要更新的条目，一个用于输入值（电话号码）的输入字段（名为“value”），以及一个保存按钮。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Phone Number Directory</title>
</head>
<body>
<h1>Phone Number Directory</h1>
<h2>Update an entry</h2>
<form>
<p><label>Name: <select name="key" onchange="fillForm()"></select></label></p>
<p><label>Phone no.: <input name="value"/></label></p>
<p><button type="button" onclick="save()">Save</button></p>
</form>
<hr/>
<nav>...</nav>
<script>...</script>
</body>
</html>
以下 `script` 元素包含用于使用 `option` 元素填充选定列表的 JavaScript 代码以及 `fillForm` 和 `save` 函数的代码。当在选定字段中选择了一个姓名时，将调用 `fillForm` 函数。 `save` 函数将输入字段中的更新值分配给 `localStorage` 存储中的选定键。
<script>
// get a handle for accessing the form element
let formEl = document.forms[0];
// get a handle for accessing the "key" selection field
let selectEl = formEl.key;
// fill selection list with options
for (let key of Object.keys( localStorage)) {
let optionEl = document.createElement("option");
optionEl.text = key;
selectEl.add( optionEl, null);
}
// fill form when an entry has been selected
function fillForm() {
formEl.value.value = localStorage[selectEl.value];
}
// save in key-value store
function save() {
localStorage[selectEl.value] = formEl.value.value;
}
</script>
练习：将 HTML 代码复制并粘贴到一个新的编辑器窗口中。不要忘记插入 `nav` 元素（来自上面的代码列表）和 `script` 元素的内容。将生成的 UI 页面保存到你的示例文件夹中，文件名为“update.html”。然后，在浏览器中打开“update.html”文件。你应该会看到一个包含用户界面的页面，如下面的图 2-3 所示。选择一个姓名，以便显示关联的电话号码。更改此电话号码，然后点击保存按钮。然后单击菜单中的主页以检查所选的键值对是否已更新。
