javascript本地存储有哪些_如何使用localStorage和sessionStorage_技术教程

JavaScript本地存储主要用localStorage和sessionStorage，均以键值对存字符串数据；localStorage持久保存，sessionStorage仅限当前标签页；二者均受同源策略限制、不支持直接存对象、无自动过期机制。

JavaScript 本地存储主要有两种 Web API：localStorage 和 sessionStorage，它们都以键值对（key-value）形式在浏览器中保存字符串数据，无需后端参与，适合存少量结构化信息（如用户偏好、表单草稿、登录状态标识等）。

localStorage 的特点与用法

localStorage 数据持久保存，关闭浏览器甚至重启电脑后依然存在，除非手动清除或代码删除。每个域名（协议+域名+端口）有独立的存储空间，通常限制为 5–10MB（因浏览器而异）。

写入数据：localStorage.setItem('theme', 'dark')
读取数据：localStorage.getItem('theme') → 返回 "dark"（注意：始终返回字符串）
删除单个：localStorage.removeItem('theme')
清空全部：localStorage.clear()
查看所有键：Object.keys(localStorage) 或遍历 localStorage.key(i)

⚠️ 注意：不能直接存对象或数组。需用 JSON.stringify() 转换，读取时用 JSON.parse() 还原：

localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 28}));
const user = JSON.parse(localStorage.getItem('user')); // {name: 'Alice', age: 28}

sessionStorage 的特点与用法

sessionStorage 数据仅在当前浏览器标签页（tab）生命周期内有效。关闭该标签页后数据自动销毁，新开同域名标签页也是独立的。适用场景包括：临时表单缓存、单页流程中的中间状态、防重复提交令牌等。

用法和 localStorage 完全一致：sessionStorage.setItem()、getItem()、removeItem()、clear()
不同标签页之间互不共享，即使同一网址也隔离
页面刷新不会丢失数据，只有关闭标签页才清除

localStorage 和 sessionStorage 的共同限制

两者都受同源策略约束（即只能被同协议、同域名、同端口的脚本访问），且无法跨 iframe 共享（除非满足特定跨域通信条件）。它们不加密、不安全，绝不能存放密码、token、银行卡号等敏感信息。

只支持字符串值，存对象/数组必须序列化
无过期机制，需自行管理有效期（例如存时间戳判断是否过期）
频繁读写可能触发性能瓶颈，大量数据建议用 IndexedDB
私密模式下部分浏览器会禁用或清空（如 Safari 无痕窗口默认禁用 localStorage）

简单封装提升实用性

可封装一个带过期时间、自动序列化的工具函数，避免每次手动处理：

const storage = {
  set(key, value, expiresMs = null) {
    const item = {
      value: JSON.stringify(value),
      expires: expiresMs ? Date.now() + expiresMs : null
    };
    localStorage.setItem(key, JSON.stringify(item));
  },
  get(key) {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;
    const item = JSON.parse(itemStr);
    if (item.expires && Date.now() > item.expires) {
      localStorage.removeItem(key);
      return null;
    }
    return JSON.parse(item.value);
  }
};
// 使用示例
storage.set('cart', [{id: 1, qty: 2}], 1000  60  60); // 1小时后过期
console.log(storage.get('cart')); // 自动解析为数组