9. HTML5 Web存储

HTML5提供了两种客户端存储数据的新方法：

localStorage

• 存储没有过期时间的数据
• 关闭浏览器后数据仍然存在
• 容量通常为5MB

基本用法：

javascript复制代码// 存储数据
localStorage.setItem("username", "张三");

// 获取数据
let username = localStorage.getItem("username");

// 移除特定数据
localStorage.removeItem("username");

// 清除所有数据
localStorage.clear();

sessionStorage

• 为单个会话存储数据
• 关闭浏览器窗口或标签页后数据会被删除
• 容量通常为5MB

基本用法：

javascript复制代码// 存储数据
sessionStorage.setItem("tempData", "临时数据");

// 获取数据
let tempData = sessionStorage.getItem("tempData");

// 移除特定数据
sessionStorage.removeItem("tempData");

// 清除所有数据
sessionStorage.clear();

存储事件

当存储内容发生变化时，会触发storage事件：

javascript复制代码window.addEventListener('storage', function(e) {
  console.log('存储变化:', e.key, e.oldValue, e.newValue, e.url);
});

Web存储的优势

1. 比Cookie容量更大
2. 存储在客户端，不会随请求发送到服务器
3. 使用简单的键值对方式操作
4. 专为Web应用设计

练习题

1. 创建一个简单的网页，使用localStorage记住用户的名字，当用户再次访问时显示问候语。
2. 设计一个简单的待办事项应用，使用localStorage存储待办事项列表。
3. 创建一个页面，使用sessionStorage记录用户在当前会话中访问过的页面。
4. 实现一个简单的购物车功能，使用localStorage存储选择的商品。
5. 创建一个表单，使用localStorage自动保存用户输入的内容，以防页面刷新后丢失。