Localstorage和sessionstorage区别
封面图
•
2025-10-26
•
JavaScript
195
0
0
0
`localStorage` 和 `sessionStorage` 是浏览器中用于存储数据的两种 Web Storage API,它们都可以在客户端(浏览器)中保存键值对的数据。虽然它们的功能相似,但在**存储生命周期**和**作用域**上有明显的区别。 --- ### 一、主要区别 | 特性 | `localStorage` | `sessionStorage` | |------|----------------|------------------| | **存储寿命** | 永久存储,除非手动清除(关闭浏览器后数据依然存在) | 会话级别,关闭页面或浏览器后数据会被清除 | | **作用域** | 同源(协议、域名、端口相同)下共享 | 同源且同窗口(或标签页)下共享 | | **存储大小** | 通常为 **5MB** 左右(不同浏览器可能略有差异) | 通常也是 **5MB** 左右 | | **是否支持跨域** | 不支持跨域访问 | 不支持跨域访问 | | **适用场景** | 需要长期保存用户偏好、登录状态等 | 临时保存页面会话信息,如表单数据、临时状态等 | --- ### 二、使用示例 #### localStorage 示例: ```javascript // 存储数据 localStorage.setItem('username', 'JohnDoe'); // 获取数据 let username = localStorage.getItem('username'); // 删除数据 localStorage.removeItem('username'); // 清空所有数据 localStorage.clear(); ``` #### sessionStorage 示例: ```javascript // 存储数据 sessionStorage.setItem('tempData', '12345'); // 获取数据 let tempData = sessionStorage.getItem('tempData'); // 删除数据 sessionStorage.removeItem('tempData'); // 清空所有数据 sessionStorage.clear(); ``` --- ### 三、总结对比 | 对比项 | localStorage | sessionStorage | |--------|--------------|----------------| | 数据生命周期 | 永久 | 会话期间 | | 存储范围 | 同源、跨窗口共享 | 同源、同窗口共享 | | 是否持久化 | 是 | 否 | | 使用场景 | 用户配置、记住我、缓存等 | 表单数据、临时状态、会话信息等 | --- 如果你需要保存用户设置并希望在多次访问时仍然保留,用 `localStorage`;如果只是临时保存当前会话的信息,比如表单填写过程中,就用 `sessionStorage`。 如需进一步了解如何处理数据类型(如对象),可以使用 `JSON.stringify()` 和 `JSON.parse()` 来序列化和反序列化数据。
上一篇:
javascript如何暂停运行若干秒
下一篇:
input单选组(radio), 选中事件
标题录入,一次不能超过6条
返回顶部
留言
留言
评论