17_HTML5 Web 存储 --[HTML5 API 学习之旅]

HTML5 Web 存储（Web Storage）是 HTML5 引入的一种在用户浏览器中存储数据的机制。它提供了比传统的 cookies 更加方便和强大的功能，包括更大的存储空间、更好的性能以及更简单的 API。Web 存储主要分为两种类型：localStorage 和 sessionStorage。

1. `localStorage`

持久性：数据不会过期，除非被明确删除或用户清空浏览器缓存。
适用场景：适合存储不需要立即发送到服务器的数据，例如用户的偏好设置、购物车内容等。
API 方法：
- setItem(key, value)：存储数据项。
- getItem(key)：获取指定键的数据项。
- removeItem(key)：移除指定键的数据项。
- clear()：清除所有数据项。
- key(index)：返回指定索引位置的键名。

示例代码

// 设置一个名为 'username' 的键值对
localStorage.setItem('username', '张三');// 获取并打印 'username' 的值
console.log(localStorage.getItem('username')); // 输出: 张三// 更新 'username' 的值
localStorage.setItem('username', '李四');
console.log(localStorage.getItem('username')); // 输出: 李四// 删除 'username' 键值对
localStorage.removeItem('username');
console.log(localStorage.getItem('username')); // 输出: null// 清除所有数据项
localStorage.clear();

下面提供了五个使用 localStorage 的 HTML5 Web 存储示例。这些例子展示了如何在不同的场景中利用 localStorage 来存储和检索数据，从而提升用户体验或实现特定功能。

示例 1: 存储用户偏好设置

在这个例子中，我们将用户的主题颜色偏好存储在 localStorage 中，并在页面加载时应用这些设置。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>用户偏好设置</title><style id="themeStyle"></style><script>function setTheme(color) {localStorage.setItem('themeColor', color);document.getElementById('themeStyle').innerHTML = `body { background-color: ${color}; }`;}window.onload = function() {const savedTheme = localStorage.getItem('themeColor');if (savedTheme) {setTheme(savedTheme);}};</script>
</head>
<body><button onclick="setTheme('lightblue')">浅蓝色主题</button><button onclick="setTheme('lightgreen')">浅绿色主题</button><button onclick="setTheme('white')">白色主题</button>
</body>
</html>

在这里插入图片描述

示例 2: 记录用户访问次数

这里我们使用 localStorage 来记录用户访问网站的次数，并在每次访问时更新计数器。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>访问次数统计</title><script>window.onload = function() {let visits = localStorage.getItem('visits') || 0;visits++;localStorage.setItem('visits', visits);document.getElementById('visitCount').innerText = `您已经访问了 ${visits} 次本页面。`;};</script>
</head>
<body><p id="visitCount"></p>
</body>
</html>

在这里插入图片描述

示例 3: 购物车功能

在这个例子中，我们将购物车中的商品信息存储在 localStorage 中，以便用户可以在不同会话之间保持其选择的商品。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>购物车</title><script>/*** 将商品添加到购物车。* * @param {string} item - 要添加的商品名称。*/function addToCart(item) {// 从 localStorage 中获取名为 'cart' 的项，并尝试将其解析为 JSON 数组。// 如果该项不存在或为空，则初始化为一个空数组。let cart = JSON.parse(localStorage.getItem('cart')) || [];// 将新商品添加到购物车数组中。cart.push(item);// 将更新后的购物车数组转换回 JSON 字符串，并保存到 localStorage 中。localStorage.setItem('cart', JSON.stringify(cart));// 弹出提示框，告知用户商品已成功添加到购物车。alert(`${item} 已添加到购物车`);}/*** 查看当前购物车的内容。*/function viewCart() {// 从 localStorage 中获取名为 'cart' 的项，并尝试将其解析为 JSON 数组。// 如果该项不存在或为空，则初始化为一个空数组。let cart = JSON.parse(localStorage.getItem('cart')) || [];// 使用 Array.prototype.join 方法将购物车中的所有商品以逗号分隔连接成一个字符串，// 然后通过 alert 弹窗向用户展示这些商品。// 如果购物车为空，则只会显示“购物车内容: ”。alert(`购物车内容: ${cart.join(', ')}`);}</script>
</head>
<body><!-- 添加商品按钮 --><button onclick="addToCart('苹果')">添加苹果</button><button onclick="addToCart('香蕉')">添加香蕉</button><!-- 查看购物车按钮 --><button onclick="viewCart()">查看购物车</button>
</body>
</html>

在这里插入图片描述

示例 4: 表单自动填充

当用户填写表单后，我们可以将表单数据保存到 localStorage，并在用户返回页面时自动填充这些数据。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单自动填充</title><script>// 当页面完全加载完毕后执行以下函数window.onload = function() {// 获取表单中的姓名和邮箱输入框元素const nameInput = document.getElementById('name');const emailInput = document.getElementById('email');// 从 localStorage 中恢复之前保存的姓名和邮箱值（如果存在）nameInput.value = localStorage.getItem('name') || ''; // 如果没有保存的值，则设置为空字符串emailInput.value = localStorage.getItem('email') || ''; // 如果没有保存的值，则设置为空字符串// 监听姓名输入框的变化事件，当用户输入时实时保存到 localStoragenameInput.oninput = function() {localStorage.setItem('name', this.value); // 将当前输入框的值保存到 'name' 键中};// 监听邮箱输入框的变化事件，当用户输入时实时保存到 localStorageemailInput.oninput = function() {localStorage.setItem('email', this.value); // 将当前输入框的值保存到 'email' 键中};};</script>
</head>
<body><!-- 表单元素 --><form><!-- 姓名输入框 --><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><!-- 邮箱输入框 --><label for="email">邮箱:</label><input type="email" id="email" name="email"><br><br><!-- 提交按钮 --><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

示例 5: 简单的任务列表

这个例子展示了一个简单的任务列表应用程序，允许用户添加、删除任务，并且任务会在浏览器关闭后仍然存在。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>任务列表</title><script>/*** 加载任务列表* 从localStorage中获取任务列表数据，并添加到页面上的任务列表中*/function loadTasks() {const taskList = document.getElementById('taskList');const tasks = JSON.parse(localStorage.getItem('tasks')) || [];tasks.forEach(task => {const li = document.createElement('li');li.textContent = task;taskList.appendChild(li);});}/*** 添加任务* 获取输入框中的任务描述，将其添加到任务列表中，并保存到localStorage中*/function addTask() {const taskInput = document.getElementById('newTask');const taskText = taskInput.value.trim();if (taskText !== '') {const tasks = JSON.parse(localStorage.getItem('tasks')) || [];tasks.push(taskText);localStorage.setItem('tasks', JSON.stringify(tasks));// 创建一个新的li元素const li = document.createElement('li');// 设置li元素的文本内容为任务文本li.textContent = taskText;// 将新的li元素添加到任务列表中document.getElementById('taskList').appendChild(li);taskInput.value = '';}}/*** 清除所有任务* 从localStorage中移除任务列表数据，并清空页面上的任务列表*/function clearTasks() {localStorage.removeItem('tasks');document.getElementById('taskList').innerHTML = '';}// 页面加载时自动调用loadTasks函数window.onload = loadTasks;</script>
</head>
<body><h2>我的任务列表</h2><input type="text" id="newTask" placeholder="输入新任务..."><button onclick="addTask()">添加任务</button><button onclick="clearTasks()">清除所有任务</button><ul id="taskList"></ul>
</body>
</html>

在这里插入图片描述

这些示例展示了 localStorage 在各种实际应用场景中的使用方式，包括但不限于存储用户偏好、统计访问次数、实现购物车功能、自动填充表单以及创建持久化的任务列表。通过合理利用 localStorage，可以显著提高 Web 应用的功能性和用户体验。

2. `sessionStorage`

会话性：数据仅在当前会话期间有效（即同一个浏览器标签页），关闭页面或标签后数据会被清除。
适用场景：适合临时存储与单个会话相关的数据，如表单数据、临时状态信息等。
API 方法：与 localStorage 相同。

示例代码

// 设置一个名为 'sessionData' 的键值对
sessionStorage.setItem('sessionData', '会话数据');// 获取并打印 'sessionData' 的值
console.log(sessionStorage.getItem('sessionData')); // 输出: 会话数据// 关闭页面或标签后，再打开新的页面或标签，尝试获取 'sessionData'
console.log(sessionStorage.getItem('sessionData')); // 输出: null (因为会话已结束)

当然，下面是两个使用 sessionStorage 的 HTML5 Web 存储示例。这些例子展示了如何在不同的场景中利用 sessionStorage 来存储和检索数据，从而提升用户体验或实现特定功能。

示例 1: 表单数据保存

在这个例子中，我们将表单中的用户输入临时保存到 sessionStorage 中。如果用户刷新页面或在同一个浏览器标签页中导航离开再返回，表单数据将自动恢复。但是一旦关闭了该标签页，所有数据都会被清除。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单数据保存</title><script>window.onload = function() {// 恢复表单数据（如果存在）const nameInput = document.getElementById('name');const emailInput = document.getElementById('email');nameInput.value = sessionStorage.getItem('name') || '';emailInput.value = sessionStorage.getItem('email') || '';// 监听表单输入事件，实时保存数据到 sessionStoragenameInput.oninput = function() {sessionStorage.setItem('name', this.value);};emailInput.oninput = function() {sessionStorage.setItem('email', this.value);};};</script>
</head>
<body><form><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="email">邮箱:</label><input type="email" id="email" name="email"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在这里插入图片描述

解释：

window.onload：当页面加载时，尝试从 sessionStorage 恢复表单数据。
oninput 事件监听器：每当用户在输入框中输入内容时，立即将最新的值保存到 sessionStorage。

示例 2: 记录会话中的浏览历史

在这个例子中，我们记录用户在同一会话期间访问过的页面，并通过一个简单的列表展示出来。一旦用户关闭当前浏览器标签页，所有记录的数据都将被清除。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>浏览历史记录</title><script>// 页面加载完成后执行的函数window.onload = function() {// 更新浏览历史updateHistory(window.location.href);// 显示浏览历史displayHistory();};/*** 更新浏览历史的函数* @param {string} url 当前页面的URL*/function updateHistory(url) {// 从sessionStorage获取历史记录，如果不存在则初始化为数组let history = JSON.parse(sessionStorage.getItem('history')) || [];// 如果历史记录中不包含当前URL，则添加到历史记录中if (!history.includes(url)) {history.push(url);// 将更新后的历史记录保存到sessionStoragesessionStorage.setItem('history', JSON.stringify(history));}}/*** 显示浏览历史的函数*/function displayHistory() {// 从sessionStorage获取历史记录，如果不存在则初始化为数组let history = JSON.parse(sessionStorage.getItem('history')) || [];// 获取页面上的历史记录列表元素const historyList = document.getElementById('historyList');// 清空现有列表historyList.innerHTML = '';// 遍历历史记录，创建并添加到列表中history.forEach(function(url, index) {const li = document.createElement('li');li.textContent = `第 ${index + 1} 次访问: ${url}`;historyList.appendChild(li);});}</script>
</head>
<body><h2>浏览历史记录</h2><ul id="historyList"></ul>
</body>
</html>

在这里插入图片描述

解释：

updateHistory(url)：每次页面加载时调用此函数，将当前页面 URL 添加到 sessionStorage 中的浏览历史数组里（避免重复添加）。
displayHistory()：从 sessionStorage 中读取浏览历史，并将其显示在一个无序列表 (<ul>) 中。
window.onload：当页面加载时，更新并显示浏览历史。

这两个示例展示了 sessionStorage 在不同应用场景中的使用方式，包括但不限于保存表单数据以防止意外丢失以及记录用户的浏览行为。由于 sessionStorage 数据仅在当前会话期间有效，因此非常适合处理与单个浏览会话相关联的信息。

Web 存储的特点

HTML5 Web 存储（Web Storage）提供了两种在用户浏览器中存储数据的方式：localStorage 和 sessionStorage。它们具有以下特点，这些特点使得 Web 存储成为一种强大且灵活的客户端数据管理工具。

1. 持久性和会话性

localStorage：
- 数据是持久性的，除非被明确删除或用户清空浏览器缓存，否则数据不会过期。
- 适合存储不需要立即发送到服务器的数据，例如用户的偏好设置、购物车内容等。
sessionStorage：
- 数据仅在当前会话期间有效（即同一个浏览器标签页），关闭页面或标签后数据会被清除。
- 适合临时存储与单个会话相关的数据，如表单数据、临时状态信息等。

2. 容量较大

每个域名通常可以存储大约 5MB 的数据（具体取决于浏览器实现）。这比传统的 cookies 提供了更多的空间来存储数据。

3. 同步操作

所有的读写操作都是同步的，这意味着它们会阻塞 JavaScript 执行，直到操作完成。不过，对于大多数应用场景来说，这种延迟是可以接受的，因为 Web 存储的操作速度非常快。

4. 只支持字符串

Web 存储只能保存字符串格式的数据。如果要存储复杂的数据结构（如对象或数组），需要先使用 JSON.stringify() 方法将其转换为字符串，读取时再用 JSON.parse() 方法解析回来。

5. 简单的 API

提供了一组简单易用的方法来进行数据的存取和管理，包括：
- setItem(key, value)：存储数据项。
- getItem(key)：获取指定键的数据项。
- removeItem(key)：移除指定键的数据项。
- clear()：清除所有数据项。
- key(index)：返回指定索引位置的键名。

6. 事件驱动

支持 storage 事件，当同一域下的其他窗口或标签页中的 Web 存储发生改变时触发。这可以用来实现跨窗口或标签页之间的通信。

7. 安全性考虑

数据是明文存储在客户端的，因此不适合用于敏感信息的存储，除非采取额外的安全措施（如加密）。
Web 存储的数据是基于同源策略的，即只有相同协议、主机名和端口的页面才能访问同一存储区域的数据。

8. 离线功能

可以用来存储应用程序状态或用户生成的内容，即使在网络连接不可用的情况下也能提供一定程度的功能和服务。

9. 性能优势

相较于 cookies，Web 存储不会随每个 HTTP 请求一起发送到服务器，从而减少了不必要的网络流量，提高了性能。

使用场景示例

用户偏好设置：可以将用户的界面偏好（如主题颜色、字体大小等）存储在 localStorage 中，以便下次访问时自动应用这些设置。
离线存储：允许用户在网络连接不可用的情况下浏览网站，并在网络恢复后再提交交互数据。
跨页面通信：通过监听 storage 事件，可以在同一域下的不同标签页之间共享和同步数据变化。

总之，HTML5 Web 存储提供了一种简单而有效的方式来管理和持久化客户端数据，增强了 Web 应用的功能性和用户体验。它不仅简化了开发流程，还为开发者提供了更多的灵活性来处理不同类型的数据需求。