首页 > 其他分享> 文章详细

localStorage与sessionStorage的区别

2021-08-25 12:00:06 阅读：139 来源： 互联网

标签：存储浏览器区别对象 sessionStorage area localStorage

Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。

我们已经有了 cookie。为什么还要其他存储对象呢？

与 cookie 不同，Web 存储对象不会随每个请求被发送到服务器。因此，我们可以保存更多数据。大多数浏览器都允许保存至少 2MB 的数据（或更多），并且具有用于配置数据的设置。
还有一点和 cookie 不同，服务器无法通过 HTTP header 操纵存储对象。一切都是在 JavaScript 中完成的。
存储绑定到源（域/协议/端口三者）。也就是说，不同协议或子域对应不同的存储对象，它们之间无法访问彼此数据。

相同点：

存储的内容为键值对，键和值都必须是字符串，我们可以使用JSON来存储对象
存储大小限制为 5MB+，具体取决于浏览器。
它们不会过期。
数据绑定到源（域/端口/协议）。

不同点：

localStorage会一直存在浏览器中，即使浏览器关闭也不会消失，sessionStorage页面刷新后数据仍然保留（但标签页关闭后数据则不再保留）
localStorage 在同源的所有标签页和窗口之间共享数据，sessionStorage 在当前浏览器标签页中可见，包括同源的 iframe

API：

setItem(key, value) —— 存储键/值对。
getItem(key) —— 按照键获取值。
removeItem(key) —— 删除键及其对应的值。
clear() —— 删除所有数据。
key(index) —— 获取该索引下的键名。
length —— 存储的内容的长度。
使用 Object.keys 来获取所有的键。
我们将键作为对象属性来访问，在这种情况下，不会触发 storage 事件。

Storage 事件：

在调用 setItem，removeItem，clear 方法后触发。
包含有关操作的所有数据（key/oldValue/newValue），文档 url 和存储对象 storageArea。
在所有可访问到存储对象的 window 对象上触发，导致当前数据改变的 window 对象除外（对于 sessionStorage 是在当前标签页下，对于 localStorage 是在全局，即所有同源的窗口）。

localStorage的应用

场景一：将用户习惯的语言存入浏览器中，下次进入时优先选取设置的语言

window.localStorage.setItem(LOCALE_KEY, lang)

场景二：自动保存表单字段，如果用户不小心关闭了页面，然后重新打开，他会发现之前未完成的输入仍然保留在那里。

<!doctype html>
<textarea style="width:200px; height: 60px;" id="area" placeholder="Write here"></textarea>
<br>
<button onclick="localStorage.removeItem('area');area.value=''">Clear</button>
<script>
    area.value = localStorage.getItem('area');
    area.oninput = () => {
      localStorage.setItem('area', area.value)
    };
</script>

参考链接：

https://zh.javascript.info/localstorage

标签：存储,浏览器,区别,对象,sessionStorage,area,localStorage
来源： https://www.cnblogs.com/artian/p/15184101.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

localStorage与sessionStorage的区别