HTML 存储之 localStorage 与 sessionStorage
在现代网页开发中，数据存储是一个重要的需求。HTML 提供了两种方便的本地存储机制：localStorage 和 sessionStorage。它们为开发者提供了一种简单而有效的方式来在浏览器中存储数据，无需依赖服务器。
localStorage
localStorage 用于持久化存储数据，数据会一直保存在浏览器中，除非手动清除。它的优点是数据不会随着页面的关闭而消失，适用于存储一些需要长期保存的信息，比如用户的设置、浏览记录等。
// 设置数据
localStorage.setItem('key', 'value');
// 获取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清除所有数据
localStorage.clear();上述代码展示了 localStorage 的基本操作。通过 setItem 方法可以将数据存储到本地，键值对的形式方便管理。getItem 用于获取指定键的数据，removeItem 则删除单个键值对，clear 方法能清除所有存储的数据。
例如，我们可以创建一个简单的待办事项列表应用，使用 localStorage 来保存任务。
<!DOCTYPE html>
<html>
<head>
<title>LocalStorage Todo List</title>
</head>
<body>
<input type="text" id="taskInput">
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
<script>
function addTask() {
const task = document.getElementById('taskInput').value;
if (task) {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
displayTasks();
document.getElementById('taskInput').value = '';
}
}
function displayTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
const taskList = document.getElementById('taskList');
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task;
taskList.appendChild(li);
});
}
window.onload = displayTasks;
</script>
</body>
</html>在这个例子中，用户输入任务后点击按钮，任务会被添加到 localStorage 中，并显示在页面上。页面加载时会从 localStorage 读取任务并展示。
sessionStorage
sessionStorage 与 localStorage 类似，但它的数据仅在当前会话期间有效。当浏览器窗口关闭时，存储的数据会被清除。这适用于临时存储一些数据，比如页面的临时状态、用户在当前页面的操作记录等。
// 设置数据
sessionStorage.setItem('key', 'value');
// 获取数据
const value = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');
// 清除所有数据
sessionStorage.clear();操作方式与 localStorage 基本一致。例如，一个电商网站的购物车功能可以使用 sessionStorage 来临时存储用户添加到购物车的商品信息。
<!DOCTYPE html>
<html>
<head>
<title>SessionStorage Shopping Cart</title>
</head>
<body>
<button onclick="addItemToCart('Product A')">Add Product A</button>
<button onclick="addItemToCart('Product B')">Add Product B</button>
<ul id="cartList"></ul>
<script>
function addItemToCart(product) {
const cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart.push(product);
sessionStorage.setItem('cart', JSON.stringify(cart));
displayCart();
}
function displayCart() {
const cart = JSON.parse(sessionStorage.getItem('cart')) || [];
const cartList = document.getElementById('cartList');
cartList.innerHTML = '';
cart.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
cartList.appendChild(li);
});
}
window.onload = displayCart;
</script>
</body>
</html>用户点击添加商品按钮，商品会被添加到 sessionStorage 中的购物车，并实时显示在页面上。当关闭浏览器窗口后，购物车数据会自动清除。
总结
localStorage 和 sessionStorage 为 HTML 开发者提供了便捷的数据存储方式。它们简单易用，能有效提升用户体验和页面功能。合理运用这两种存储机制，可以让网页在数据管理方面更加灵活高效，无论是长期保存用户设置还是临时记录页面状态，都能轻松实现。开发者应根据具体需求选择合适的存储方式，充分发挥它们的优势，打造出更优质的网页应用。
