LocalStorage持久存储数据，适合长期保存用户偏好；SessionStorage仅在会话期间有效，用于临时保存敏感或中间数据，两者均需注意同源策略、字符串限制及安全风险。

在Web开发中，前端需要临时或长期保存一些用户数据，比如登录状态、用户偏好设置或表单内容。JavaScript提供了两种简单易用的本地存储方式：LocalStorage 和 SessionStorage。它们都属于Web Storage API，使用起来比Cookie更方便，容量更大，操作也更直观。

LocalStorage：持久化本地存储

特点： 数据没有过期时间，除非手动清除，否则一直保留在浏览器中，即使关闭浏览器或重启电脑也不会丢失。

适合存储长期有效的信息，比如用户的主题偏好、语言选择等。

常用方法：

• 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：会话级临时存储

特点： 数据仅在当前会话有效，关闭浏览器标签页后自动清除。

适用于临时保存敏感或一次性数据，比如表单填写过程中的中间状态、验证码等。

前端设计引擎

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

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。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南