javascript本地存储是什么_localStorage和sessionStorage如何选择？

夢幻星辰 2026-01-09 00:00:00 次阅读

localStorage用于长期存储同源数据（5–10MB），需序列化；sessionStorage仅限当前标签页，刷新保留、关闭清空；二者API相同但数据隔离，支持storage事件跨窗口通信。

本地存储就是浏览器给你留的两个小抽屉，localStorage 是长期保存的抽屉，关掉页面甚至重启电脑都还在；sessionStorage 是临时抽屉，只在当前标签页生命周期内有效，关掉标签就清空。

什么时候该用 `localStorage`？

适合存那些「用户明确希望下次打开还能看到」的数据，比如：主题偏好、折叠面板状态、搜索历史、已登录用户的 token（注意：敏感 token 更推荐配合后端短期刷新机制，别只靠它）。

关键限制要注意：

localStorage 的数据是**同源（协议+域名+端口）隔离**的，https://a.com 和 http://a.com 互不可见
容量通常为 5–10 MB，但不同浏览器有差异，别指望存大文件或大量 JSON
所有操作都是同步阻塞的，频繁写入大对象可能卡住主线程
不支持直接存对象，必须用 JSON.stringify() 序列化，读取时用 JSON.parse()

什么时候该用 `sessionStorage`？

适合存「只在这一次浏览中需要延续」的状态，比如：表单草稿、多步流程的中间数据、临时筛选条件、未提交的购物车（仅限当前会话）。

特别注意它的边界：

新开一个标签页或窗口，哪怕 URL 完全一样，sessionStorage 也是全新的，彼此不共享
页面刷新、前进后退都保留，只有关闭标签页或调用 sessionStorage.clear() 才会丢
和 localStorage 一样不支持直接存对象，也要手动序列化/反序列化

`localStorage` 和 `sessionStorage` 的 API 完全一致，但数据不互通

它们都提供 setItem()、getItem()、removeItem()、clear() 这四个方法，用法一模一样。但你往 localStorage 存的东西，在 sessionStorage 里绝对 getItem() 不出来，反之亦然——它们是两套独立的键值空间。

例如：

localStorage.setItem('user', JSON.stringify({ id: 123, name: 'Alice' }));
sessionStorage.setItem('tempSearch', 'react hooks');

console.log(localStorage.getItem('tempSearch')); // null
console.log(sessionStorage.getItem('user'));     // null