LocalStorage持久存储数据，适合长期保存用户偏好；sessionStorage仅在会话期间有效，用于临时保存敏感或中间数据，两者均需注意同源策略、字符串限制及安全风险。
在Web开发中，前端需要临时或长期保存一些用户数据，比如登录状态、用户偏好设置或表单内容。javaScript提供了两种简单易用的本地存储方式：LocalStorage 和 SessionStorage。它们都属于Web Storage API，使用起来比cookie更方便，容量更大，操作也更直观。
LocalStorage：持久化本地存储
特点： 数据没有过期时间，除非手动清除，否则一直保留在浏览器中，即使关闭浏览器或重启电脑也不会丢失。
适合存储长期有效的信息，比如用户的主题偏好、语言选择等。
常用方法：
立即学习“Java免费学习笔记（深入）”；
- localStorage.setItem(‘key’, ‘value’) —— 存储数据
- localStorage.getItem(‘key’) —— 获取数据
- localStorage.removeItem(‘key’) —— 删除某条数据
- localStorage.clear() —— 清空所有数据
示例：
localStorage.setItem(‘username’, ‘Alice’);
const name = localStorage.getItem(‘username’); // ‘Alice’
localStorage.removeItem(‘username’);
SessionStorage：会话级临时存储
特点： 数据仅在当前会话有效，关闭浏览器标签页后自动清除。
适用于临时保存敏感或一次性数据，比如表单填写过程中的中间状态、验证码等。
API与LocalStorage完全一致，只是生命周期不同。
示例：
sessionStorage.setItem(‘tempData’, ‘draft’);
const draft = sessionStorage.getItem(‘tempData’); // ‘draft’
sessionStorage.clear();
注意事项和使用建议
虽然Local和SessionStorage使用简单，但有几个关键点需要注意：
- 只能存储字符串。如果要存对象或数组，需用 jsON.stringify() 转换，读取时用 json.parse() 解析。
- 同源策略限制：每个域名有独立的存储空间，无法跨域访问。
- 存储容量通常为5-10MB，具体取决于浏览器。
- 运行在主线程，大量数据操作可能影响性能。
- 不安全，不要存储敏感信息（如密码、Token），容易受到xss攻击。
实际应用场景对比
假设你在做一个记事本应用：
- 用 LocalStorage 保存用户的默认字体大小或夜间模式设置，下次打开仍生效。
- 用 SessionStorage 保存正在编辑但未提交的内容，防止页面意外刷新丢失，关闭标签即清空。
基本上就这些。合理使用这两种存储方式，可以显著提升用户体验，同时避免不必要的服务器请求。关键是根据数据的生命周期选择合适的API。