HTML5 本地存储与会话存储

Posted 2023-03-05

【中文标题】HTML5 本地存储与会话存储

【英文标题】：HTML5 Local storage vs. Session storage

【发布时间】：2011-07-28 05:53:42

【问题描述】：

除了非持久性和仅限于当前窗口之外，会话存储是否比本地存储有任何好处（性能、数据访问等）？

【问题讨论】：

@robert - 我相信你是不正确的。从w3.org/TR/webstorage sessionStorage 被限定为“***浏览上下文”，这意味着它对于每个浏览器选项卡/窗口都是唯一的。但是，localStorage 的范围仅限于源，这意味着它在同一源上的所有页面之间共享。

回复：性能jsperf.com/localstorage-vs-sessionstorage

What is the difference between localStorage, sessionStorage, session and cookies?的可能重复

【参考方案1】：

localStorage 和 sessionStorage 都扩展了 Storage。除了sessionStorage的预期“非持久性”之外，它们之间没有区别。

也就是说，存储在localStorage 中的数据会一直存在，直到被明确删除。所做的更改会保存下来，可供所有当前和将来访问该网站的用户使用。

对于sessionStorage，更改仅适用于每个标签。所做的更改将保存并可供当前页面在该标签中使用，直到它关闭。一旦关闭，存储的数据就会被删除。

【讨论】：

这里有更广泛的讨论，您可能会发现这里有帮助：***.com/questions/19867599/…

如果你将一些数据保存在http下的存储中，你将无法在https上检索它

我在 Chrome v41.x 上对此进行了测试，似乎上述关于 https 的说法不正确：localStorage 保留其存储的数据。

SessionStorage 在页面重新加载和恢复后仍然存在，但打开新选项卡/窗口将启动新会话。

【参考方案2】：

唯一的区别是 localStorage 有不同的过期时间，sessionStorage 只能在创建它的窗口打开时访问。 localStorage 会一直持续到您将其删除或用户将其删除。 假设您想保存一个登录用户名和密码，出于安全原因（即另一个人稍后访问他们的帐户），您想使用sessionStorage而不是localStorage。 但是，如果您想在他们的机器上保存用户的设置，您可能需要localStorage。总而言之：

localStorage - 长期使用。sessionStorage - 当您需要存储变化的东西或临时的东西时使用

【参考方案3】：

其他几点可能有助于理解本地存储和会话存储之间的差异

本地存储和会话存储的范围都是文档来源，所以

https://mydomain.com/ http://mydomain.com/ https://mydomain.com:8080/

以上所有网址将共享相同的存储空间。 （网页的通知路径不影响网页存储）

即使对于在不同选项卡中打开具有相同来源策略的文档，会话存储也不同，因此在两个不同选项卡中打开相同网页不能共享相同会话存储。

本地和会话存储也由浏览器供应商限定。所以 IE 保存的存储数据不能被 Chrome 或 FF 读取。

希望这会有所帮助。

【讨论】：

不，http 和 https 之间的 sessionStorage 共享相同，但 localStorage 不是。

如果你先在 https 源中设置 sessionStorage，它将在 http 中可用，但如果你在 http 中创建 sessionStore，则在 http 中不可用

@Shahdat，您的意思是“然后将无法在 https 中使用”（注意 s）？

@DanielWerner 是的，如果您在 http 中创建 sessionStore，那么在 https 中将不可用。

【参考方案4】：

localStorage 和 sessionStorage 之间的主要区别在于 sessionStorage 在每个选项卡中都是唯一的。如果关闭选项卡，sessionStorage 将被删除，localStorage 不会。你也不能在标签之间进行通信:)

另一个细微的区别是，例如在 Safari (8.0.3) 上，localStorage 有 2551 k 个字符的限制，但sessionStorage 有无限存储空间

在 Chrome (v43) 上，localStorage 和 sessionStorage 都限制为 5101 k 个字符（正常/隐身模式之间没有区别）

在 Firefox 上，localStorage 和 sessionStorage 都限制为 5120 k 个字符（正常/私人模式之间没有区别）

速度没有任何区别:)

Mobile Safari 和 Mobile Chrome 也有问题，隐私模式 Safari 和 Chrome 的最大空间为 0KB

【讨论】：

限制为 5101 k 个字符？所以.. 510.1 万个字符？

@Zze 是的，1 个字符通常是 1 个字节，因此 500 万个字符相当于 5Mb 的存储空间。

@BasimKhajwal 那是 5MB。字节，而不是位。

您能在您提到的内容中添加来源吗？

@Mukus，没有来源，我自己进行了测试，并且私人模式 Safari 有一个问题，因为它有 localStorage 但那里没有空间，而且我的 polyfill 不会触发，因为 localStorage 存在，但是脚本失败，因为它无法在那里存储任何内容。您也可以使用此工具进行测试 - dev-test.nemikor.com/web-storage/support-test

【参考方案5】：

sessionStorage 与localStorage 相同，只是它只存储一个会话的数据，并且当用户关闭创建它的浏览器窗口时，它将被删除。

【讨论】：

您的意思是 tab 而不是 window？

【参考方案6】：

在性能方面，我的（粗略）测量发现 1000 次写入和读取没有差异

安全方面，直觉上看来 localStore 可能会在 sessionStore 之前关闭，但没有具体证据 - 也许其他人会这样做？

功能方面，同意上面的 digitalFresh

【讨论】：

关于页面加载性能： sessionStorage 和 localStorage 都是在页面加载渲染周期中启动和填充的。因此，在浏览器中无法测量初始页面加载时间的损失。

【参考方案7】：

是的，会话存储和本地存储在行为上是相同的，除了本地存储将存储数据，直到并且除非用户删除缓存，cookie 和会话存储数据将保留在系统中，直到我们关闭会话，即直到我们关闭会话存储创建窗口。

【参考方案8】：

在我看来，会话存储相对于本地存储的优势在于它在 Firefox 中具有unlimited capacity，并且不会持续超过会话。 （当然这取决于你的目标是什么。）

【参考方案9】：

sessionStorage 为每个给定源维护一个单独的存储区域，该区域在页面会话期间可用（只要浏览器处于打开状态，包括页面重新加载和恢复）

localStorage 做同样的事情，但即使在浏览器关闭并重新打开时仍然存在。

我是从Web Storage API那里得到的

【参考方案10】：

本地存储：它保持存储用户信息数据，没有过期日期，当用户关闭浏览器窗口时，这些数据不会被删除，它可以用于日、周、月和年。 p>

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

会话存储：与本地存储日期相同，只是它会在网络用户关闭浏览器窗口时删除所有窗口。

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

阅读更多Click

【参考方案11】：

迟到的答案，但觉得在这里补充几点。

会话存储将可用于特定选项卡，我们可以通过浏览器使用本地存储。两者都默认同源，我们也可以使用键值对手动存储值（值必须是字符串）。

一旦浏览器的选项卡（会话）关闭，则该选项卡上的会话存储将被清除，对于本地存储，我们需要 明确清除。最大存储限制分别为5MB 和10MB。

我们可以像下面这样保存和检索数据，

保存：

sessionStorage.setItem('id', noOfClicks);   // localStorage.setItem('id', noOfClicks);

sessionStorage.setItem('userDetails', JSON.stringify(userDetails));   // if it's object

获取：

sessionStorage.getItem('id');    // localStorage.getItem('id');

User user = JSON.parse(sessionStorage.getItem("userDetails")) as User;  // if it's object

修改：

sessionStorage.removeItem('id');    // localStorage.removeItem('id');

sessionStorage.clear();   // localStorage.clear();

PS： getItem() 也将数据作为字符串返回，我们需要将其转换为 为 JSON 格式 如果是对象则访问。

您可以在此处阅读有关浏览器存储的更多信息..

Difference between localStorage, sessionStorage and cookies

localstorage-vs-sessionstorage