JS本地存储怎么操作_JS localStorage与sessionStorage使用教程

localStorage持久存储，sessionStorage仅限会话；两者均用setItem、getItem等方法操作，配合JSON处理对象，注意安全与异常。

JavaScript 提供了两种常见的本地存储方式：localStorage 和 sessionStorage。它们都能在浏览器中保存数据，使用简单，适合存储字符串类的轻量级信息。下面详细介绍它们的用法和区别。

localStorage 基本操作

localStorage 用于长期保存数据，除非手动清除，否则数据不会过期。

保存数据：
使用 setItem() 方法存储键值对。

localStorage.setItem('username', '张三');

读取数据：
使用 getItem() 获取指定键的值。

const name = localStorage.getItem('username');

删除数据：
使用 removeItem() 删除某一条数据。

localStorage.removeItem('username');

清空所有数据：
使用 clear() 清除当前域名下所有 localStorage 数据。

localStorage.clear();

sessionStorage 基本操作

sessionStorage 的操作方法与 localStorage 完全相同，但生命周期不同 —— 数据仅在当前会话有效，关闭页面或浏览器后自动清除。

保存临时数据：

sessionStorage.setItem('token', 'abc123');

获取临时数据：

const token = sessionStorage.getItem('token');

删除或清空：

sessionStorage.removeItem('token');
sessionStorage.clear();

注意事项与使用技巧

虽然 localStorage 和 sessionStorage 只能存储字符串，但可以通过 JSON 转换处理对象或数组。

• 存储对象时先用 JSON.stringify() 转为字符串
• 读取时用 JSON.parse() 还原为对象
• 例如：
  localStorage.setItem('user', JSON.stringify({name: '李四', age: 25}));
const userData = JSON.parse(localStorage.getItem('user'));
• 注意异常处理，某些情况下（如存储空间满）可能抛出错误
• 不要存储敏感信息，本地存储对 XSS 攻击较脆弱

localStorage 与 sessionStorage 的主要区别

• 生命周期：localStorage 持久保存；sessionStorage 关闭标签页即失效
• 作用范围：同源文档可共享 localStorage；sessionStorage 仅限当前页面会话
• 适用场景：用户偏好设置用 localStorage；表单临时数据用 sessionStorage

基本上就这些。掌握 setItem、getItem、removeItem 和 clear 四个方法，再注意数据类型转换，就能熟练使用 JS 本地存储。不复杂但容易忽略细节。