怎样用JavaScript操作本地存储？

在网页开发中，我们经常需要把一些数据保存在用户的浏览器端，比如用户的登录状态、页面偏好设置、临时表单数据等，这时候就可以用JavaScript提供的本地存储能力来实现。本地存储不需要依赖后端服务器，数据直接存在客户端，使用起来非常方便。

本地存储的两种核心方式

JavaScript的Web Storage API提供了两种本地存储方式，分别是localStorage和sessionStorage，二者的核心区别是数据的有效期和作用域不同。

localStorage的特点

• 存储的数据没有过期时间，除非手动删除，否则会一直保存在浏览器中
• 同一域名下的所有页面都可以共享这份数据
• 存储容量一般在5MB左右，不同浏览器可能略有差异
• 适合存储需要长期保存的数据，比如用户的主题设置、登录token等

sessionStorage的特点

• 存储的数据只在当前浏览器标签页有效，关闭标签页后数据会自动清除
• 同一域名下的不同标签页之间无法共享sessionStorage数据
• 存储容量和localStorage基本一致
• 适合存储临时的会话数据，比如当前页面的表单填写进度、临时缓存的接口数据等

localStorage的基础操作

localStorage提供了几个简单的方法来完成数据的增删改查，所有操作都是同步的，会在当前线程执行。

存储数据

使用setItem方法存储数据，它接收两个参数，第一个是键名，第二个是键值，注意键值会被自动转换成字符串类型。

// 存储字符串类型数据
localStorage.setItem('username', '张三');
// 存储对象类型数据，需要先转成JSON字符串
const userSetting = {
  theme: 'dark',
  fontSize: 16
};
localStorage.setItem('userSetting', JSON.stringify(userSetting));

读取数据

使用getItem方法读取数据，传入对应的键名，返回对应的键值，如果键不存在则返回null。

// 读取字符串数据
const username = localStorage.getItem('username');
console.log(username); // 输出：张三

// 读取对象数据，需要把JSON字符串转回对象
const settingStr = localStorage.getItem('userSetting');
const setting = JSON.parse(settingStr);
console.log(setting.theme); // 输出：dark

修改数据

修改数据和存储数据的操作一致，直接对同一个键名调用setItem方法，新的值会覆盖旧的值。

// 修改username的值
localStorage.setItem('username', '李四');
console.log(localStorage.getItem('username')); // 输出：李四

删除数据

删除单个数据可以使用removeItem方法，传入要删除的键名即可；如果要清除所有localStorage数据，可以使用clear方法。

// 删除单个键为username的数据
localStorage.removeItem('username');
console.log(localStorage.getItem('username')); // 输出：null

// 清除所有localStorage数据
localStorage.clear();

获取所有键名

可以使用key方法获取指定索引位置的键名，结合length属性可以遍历所有存储的键。

localStorage.setItem('a', '1');
localStorage.setItem('b', '2');
// 遍历所有键名
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(`键：${key}，值：${value}`);
}

sessionStorage的基础操作

sessionStorage的操作方法和localStorage几乎完全一致，只是存储的数据生命周期不同，下面是简单的使用示例。

// 存储会话数据
sessionStorage.setItem('tempFormData', JSON.stringify({
  name: '测试',
  age: 20
}));

// 读取会话数据
const tempData = JSON.parse(sessionStorage.getItem('tempFormData'));
console.log(tempData.name); // 输出：测试

// 关闭当前标签页后，再打开页面读取会返回null
console.log(sessionStorage.getItem('tempFormData')); // 关闭标签页后输出：null

使用本地存储的注意事项

• 本地存储只能存储字符串类型的数据，如果要存储对象、数组等复杂类型，需要先使用JSON.stringify转成字符串，读取时再用JSON.parse转回原类型
• 不要存储敏感数据，比如用户密码、支付信息等，因为本地存储的数据可以被用户轻易查看和修改
• 存储容量有限，不要存储过大的数据，避免超出容量限制导致报错
• 本地存储的数据遵循同源策略，只有同一协议、同一域名、同一端口的页面才能共享对应的存储数据
• 在浏览器无痕模式下，部分浏览器可能会限制本地存储的使用，或者关闭页面后直接清除所有数据，需要做兼容处理

两种存储方式的选择建议

如果数据需要长期保存，比如用户的个性化设置、登录后的身份标识，优先选择localStorage；如果数据只是当前会话临时使用，比如表单的临时填写内容、页面间的临时传参，优先选择sessionStorage。合理选择存储方式可以避免不必要的数据残留，也能让数据的生命周期更符合业务需求。

JavaScriptlocalStoragesessionStorage本地存储Web_Storage_API修改时间：2026-05-29 23:39:58