html存储

HTML存储方式详解

Cookie

• 定义：由服务器发送并存储在客户端的小文本文件,每次同源HTTP请求时自动携带。

• 特点：

  • 大小限制：单条Cookie约4KB，总数量受限（通常不超过20条）。
  • 生命周期：可设置过期时间（Expires）或有效期（Max-Age），默认为会话级（关闭浏览器失效）。
  • 作用域：属于当前域名及子域名，通过Path属性控制路径。

• 用途：用户登录状态、个性化设置、跟踪用户行为。

• 代码示例：

  // 设置Cookie
  document.cookie = "username=John; expires=Thu, 01 Jan 2024 00:00:00 GMT; path=/";
  // 读取Cookie
  const getCookie = (name) => {
    const cookies = document.cookie.split('; ');
    return cookies.find(row => row.startsWith(name))?.split('=')[1];
  };
  console.log(getCookie('username')); // 输出：John

LocalStorage

• 定义：浏览器提供的本地存储接口,数据持久化存储。

• 特点：

  • 大小限制：约5MB。
  • 生命周期：永久有效,除非手动清除或通过代码删除。
  • 作用域：仅当前域名+路径（window.location.origin）。

• 用途：长期保存用户偏好、缓存数据。

• 代码示例：

  // 存储数据
  localStorage.setItem('theme', 'dark');
  // 读取数据
  const theme = localStorage.getItem('theme'); // 输出：dark
  // 删除数据
  localStorage.removeItem('theme');

SessionStorage

• 定义：会话级存储,数据仅在页面会话期间有效。

• 特点：

  • 大小限制：约5MB。
  • 生命周期：页面关闭或标签页关闭后清除。
  • 作用域：仅当前页面（不共享给其他标签页或窗口）。

• 用途：临时存储未提交的表单数据、会话状态。

• 代码示例：

  // 存储数据
  sessionStorage.setItem('tempData', JSON.stringify({a:1,b:2}));
  // 读取数据
  const tempData = JSON.parse(sessionStorage.getItem('tempData'));

IndexedDB

• 定义：浏览器内置的低级API,用于存储大规模结构化数据。

• 特点：

  • 大小限制：理论上可存储数GB数据。
  • 生命周期：永久有效,需手动管理。
  • 特性：支持事务、索引、键范围查询,适合复杂数据操作。

• 用途：离线应用数据存储、大型数据集管理（如聊天记录、文件缓存）。

• 代码示例：

  // 打开数据库
  const dbPromise = idb.openDB('myDatabase', 1, {
    upgrade(db) { db.createObjectStore('keys', {keyPath: 'id'}); }
  });
  // 写入数据
  dbPromise.then(db => {
    const tx = db.transaction('keys', 'readwrite');
    tx.store.put({id:1, name:'Alice'});
    tx.done.then(() => {
      console.log('数据写入成功');
    });
  });

存储方式对比表

相关问题与解答

问题1：为什么Cookie会自动随HTTP请求发送，而LocalStorage不会？

解答：
Cookie是HTTP协议的一部分，由服务器通过Set-Cookie响应头设置，浏览器会在后续请求中通过Cookie请求头自动携带符合条件的Cookie，而LocalStorage是HTML5提供的前端API，仅在客户端生效,数据不会自动上传到服务器。

问题2：如何选择HTML5存储方式（LocalStorage/SessionStorage/IndexedDB）？

解答：

• LocalStorage：适合需要长期保存且不涉及敏感数据的简单键值对（如用户偏好设置）。
• SessionStorage：适合临时数据存储（如未提交的表单），数据仅在当前页面会话中使用。
• IndexedDB：适合需要复杂数据结构、高频读写或大规模数据存储的场景（如离线应用、文件