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 本地存储。不复杂但容易忽略细节。
