当前位置：首页 > 文章列表 > 文章 > 前端 > localStorage与sessionStorage区别详解

localStorage与sessionStorage区别详解

2026-01-24 14:21:41 0浏览收藏

珍惜时间，勤奋学习！今天给大家带来《localStorage和sessionStorage是浏览器提供的本地存储机制，用于在客户端存储数据。它们的区别在于数据的生命周期和作用域。1. localStorage特点：数据永久存储，除非手动清除，否则不会过期。使用场景：适合存储需要长期保留的数据，如用户偏好设置、缓存等。存储方式：通过 localStorage.setItem(key, value) 存储数据，通过 localStorage.getItem(key) 获取数据。示例代码：// 存储数据 localStorage.setItem('username', 'JohnDoe'); // 获取数据 const username = localStorage.getItem('username'); console.log(username); // 输出: JohnDoe // 删除数据 localStorage.removeItem('username'); // 清空所有数据 localStorage.clear();2. sessionStorage特点：数据仅在当前会话期间有效，关闭页面或浏览器后数据会被清除。使用场景：适合存储临时数据，如表单填写状态、临时会话信息等。存储方式：与 localStorage 类似，使用 sessionStorage.setItem(key, value) 和 sessionStorage.getItem(key)。示例代码： // 存储数据 sessionStorage.setItem('theme', 'dark'); // 获取数据》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

localStorage和sessionStorage只能存储字符串，存对象需JSON.stringify()、读取需JSON.parse()并加try/catch防错，二者API相同但生命周期不同：localStorage持久化，sessionStorage仅限当前标签页。

javascript的localStorage和sessionStorage如何存储数据？【教程】

它们只能存字符串，任何非字符串数据都得自己转成字符串再存，否则会意外变成 "[object Object]" 或 "undefined"。

localStorage 和 sessionStorage 的 setItem 方法只接受字符串值

这两个 API 的底层设计就是键值对存储，且 value 参数类型被强制限定为 DOMString（即字符串）。传入对象、数组、数字甚至布尔值，都会被隐式调用 .toString()：

localStorage.setItem('user', { name: 'Alice' });
console.log(localStorage.getItem('user')); // "[object Object]"

localStorage.setItem('count', 42);
console.log(localStorage.getItem('count')); // "42"（看似正常，但类型已丢失）

所以实际使用中必须显式序列化：

存对象/数组：统一用 JSON.stringify()
读取后：必须用 JSON.parse() 恢复，且要加 try/catch 防止解析失败（比如值被手动篡改过）
存布尔或数字：虽然能隐式转字符串，但读取时仍是字符串，需手动转换（Boolean()、Number() 或一元加号 +）

如何安全地存取 JSON 数据

最常踩的坑是没处理 JSON.parse() 报错。用户可能直接在开发者工具里把 localStorage 值改成非法 JSON，导致页面 JS 崩溃。

function safeSet(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (e) {
    console.error('localStorage set failed:', e);
  }
}

function safeGet(key, defaultValue = null) {
  const raw = localStorage.getItem(key);
  if (!raw) return defaultValue;
  try {
    return JSON.parse(raw);
  } catch (e) {
    console.warn('Invalid JSON in localStorage:', key, e);
    return defaultValue;
  }
}

safeSet('profile', { id: 123, active: true });
console.log(safeGet('profile')); // { id: 123, active: true }