html5本地存储的方法

HTML5本地存储方法详解

localStorage（本地存储）

• 特点：
  • 数据持久化,关闭浏览器后仍保留。
  • 所有同源页面共享数据（同一协议、域名、端口）。
  • 容量较大（通常约5MB）。
• 操作方法：
  • 存储数据：localStorage.setItem('key', 'value')
  • 读取数据：localStorage.getItem('key')
  • 删除数据：localStorage.removeItem('key')
  • 清空数据：localStorage.clear()
• 适用场景：长期保存用户偏好、配置等数据。

sessionStorage（会话存储）

• 特点：
  • 数据仅在页面会话期间有效（标签页关闭后清除）。
  • 同源但不同标签页数据隔离。
  • 容量与localStorage相同（约5MB）。
• 操作方法：
  • 存储数据：sessionStorage.setItem('key', 'value')
  • 读取数据：sessionStorage.getItem('key')
  • 删除数据：sessionStorage.removeItem('key')
  • 清空数据：sessionStorage.clear()
• 适用场景：临时存储表单数据、会话状态等。

IndexedDB（索引式数据库）

• 特点：
  • 异步API,支持复杂数据结构（对象、数组等）。
  • 容量大（通常可达数百MB甚至更高）。
  • 支持事务、索引、游标等数据库操作。
• 操作方法：

  // 打开数据库
  let db;
  const request = indexedDB.open('myDatabase', 1);
  request.onupgradeneeded = (event) => {
    db = event.target.result;
    db.createObjectStore('users', { keyPath: 'id' });
  };
  request.onsuccess = (event) => {
    db = event.target.result;
    // 添加数据
    const transaction = db.transaction(['users'], 'readwrite');
    const store = transaction.objectStore('users');
    store.add({ id: 1, name: 'John' });
  };

• 适用场景：存储大量结构化数据（如离线应用、复杂数据管理）。

Cookies（传统存储）

• 特点：
  • 随每次HTTP请求发送到服务器。
  • 容量极小（约4KB）。
  • 可设置过期时间或路径。
• 操作方法：

  // 设置Cookie
  document.cookie = "username=John; max-age=604800"; // 7天
  // 读取Cookie
  const cookies = document.cookie.split('; ');

• 适用场景：与服务器交互时传递少量数据（如登录状态）。

本地存储方式对比表

相关问题与解答

问题1：如何选择localStorage和sessionStorage？

解答：

• IndexedDB是HTML5标准，提供更强大的异步操作和事务支持，适合复杂数据存储。
• Web SQL Database是基于SQL的旧标准，已被多数浏览器弃用，性能和兼容性较差。
• 现代开发推荐使用IndexedDB或`local