bom本身不提供存储能力,但通过window暴露的localstorage和sessionstorage(属web storage api)实现本地存储;二者均以字符串键值对存取,需json序列化对象,区别在于localstorage跨会话持久同源共享,sessionstorage仅限单标签页会话。

JavaScript中BOM(浏览器对象模型)本身不直接提供存储能力,但通过 window 对象暴露的 localStorage 和 sessionStorage API,实现了对浏览器本地存储的访问和操作。它们都属于 Web Storage API,是 BOM 的一部分,调用时可省略 window. 前缀(如直接写 localStorage.setItem())。
localStorage 和 sessionStorage 的基本用法一致
两者都使用键值对方式存取字符串数据,核心方法完全相同:
-
存数据:
setItem(key, value)—— 注意:value 必须是字符串;若存对象或数组,需先用JSON.stringify() -
取数据:
getItem(key)—— 返回字符串,若需还原对象,要用JSON.parse() -
删单个:
removeItem(key) -
清空全部:
clear()
例如保存用户主题偏好:localStorage.setItem('theme', 'dark');
读取时:const theme = localStorage.getItem('theme'); // 'dark'
localStorage 的生命周期:跨会话持久存在
数据一旦写入,就长期保留在浏览器中,不受页面刷新、标签页切换、甚至浏览器重启影响。
- 只要用户没手动清除(如在设置里清缓存、调用
clear()或removeItem()),数据一直存在 - 同源(协议+域名+端口)的所有页面、所有标签页、所有窗口都能读写同一份数据
- 适合存用户长期设置,比如语言选择、夜间模式开关、布局偏好等
sessionStorage 的生命周期:仅限当前标签页会话
数据绑定在“单个浏览器标签页”上,生命周期严格受限于该标签页的打开状态。
- 页面刷新、跳转到同源其他页面,数据保留
- 关闭该标签页(或窗口)后,数据立即销毁
- 新开一个同源标签页,哪怕 URL 完全一样,也是全新的
sessionStorage,互不可见 - 适合临时性场景,比如多步表单的中间草稿、未提交的筛选条件、一次性验证码缓存
关键区别总结(直接影响选型)
二者 API 表面一致,但行为差异决定用途:
- 存活时间:localStorage 永久(除非清除);sessionStorage 关闭标签即消失
- 作用域范围:localStorage 同源共享;sessionStorage 每个标签页独立
-
数据类型:都只存字符串,但实际开发中常配合
JSON序列化/反序列化处理对象 - 传输行为:都不参与 HTTP 请求,服务端无法自动获取,也不随请求发送
- 容量限制:通常约 5MB,两者基本一致,远大于 cookie 的 4KB 上限
安全提示:二者均运行在客户端,绝不能存储密码、token、银行卡号等敏感信息。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











