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

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

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

localStorage 基本操作

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

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

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

localStorage.removeItem('username');

localStorage.clear();

sessionStorage 基本操作

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

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

37

查看详情

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

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

sessionStorage.removeItem('token');<br>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 本地存储。不复杂但容易忽略细节。

以上就是JS本地存储怎么操作_JS localStorage与sessionStorage使用教程的详细内容，更多请关注php中文网其它相关文章！