html5存储功能的知识

HTML5存储功能详解

本地存储（localStorage）

• 特点：数据持久化存储，即使关闭浏览器或重启计算机，数据仍然存在，除非手动清除。
• 容量限制：通常为5MB左右（不同浏览器可能有差异）。
• 作用域：以域名为作用范围，同源的不同页面可共享数据。
• 数据类型：仅支持字符串形式存储，需通过JSON.stringify()和JSON.parse()处理对象。
• API方法：
  • localStorage.setItem(key, value)：存储数据。
  • localStorage.getItem(key)：获取数据。
  • localStorage.removeItem(key)：删除指定数据。
  • localStorage.clear()：清空所有数据。
• 示例：

  // 存储数据
  localStorage.setItem('username', 'JohnDoe');
  // 读取数据
  const name = localStorage.getItem('username');
  console.log(name); // 输出：JohnDoe
  // 删除数据
  localStorage.removeItem('username');

会话存储（sessionStorage）

• 特点：数据仅在当前页面会话中有效，标签页关闭或浏览器退出时数据被清除。
• 容量限制：与localStorage相同（约5MB）。
• 作用域：仅当前页面（或标签页）可见，其他页面无法访问。
• API方法：与localStorage完全一致（setItem、getItem等）。
• 示例：

  // 存储临时数据
  sessionStorage.setItem('tempData', 'test');
  // 刷新页面后仍可读取
  const temp = sessionStorage.getItem('tempData');
  console.log(temp); // 输出：test

IndexedDB

• 特点：支持复杂数据存储（如对象、二进制数据），提供事务支持，适合大规模数据管理。
• 容量限制：通常为500MB以上（不同浏览器限制不同）。
• 作用域：同源策略，但支持多线程操作。
• 数据类型：支持键值对、对象、ArrayBuffer等。
• API复杂度：需使用异步操作（open、add、put等）。
• 示例：

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

Cookies（补充说明）

• 特点：自动随HTTP请求发送，支持过期时间设置，但容量极小（约4KB）。
• 用途：常用于用户认证（如Set-Cookie头）或少量配置信息。
• 与HTML5存储的区别：
  • 每次请求都会携带Cookies,影响性能。
  • 仅支持字符串,且需服务器参与设置。

存储方式对比表

相关问题与解答

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

解答：

• 若需长期保存少量简单数据（如用户设置、偏好），优先使用localStorage。
• 若需临时存储会话级数据（如表单临时数据），使用sessionStorage。
• 若需管理大量复杂数据（如离线应用、数据库操作），选择IndexedDB。

问题2：如何清除所有localStorage数据？

解答：
调用localStorage.clear()方法即可清空当前域名下的所有本地存储数据。

localStorage.clear(); // 谨慎操作！不可撤回