HTML5本地存储与会话存储的比较

Question

除了不具备持久性并且仅限于当前窗口范围内，Session Storage 相比 Local Storage 是否还有其他优势（例如性能、数据访问等）？

- jpkeisala

---

@robert - 我认为你是错误的。根据http://www.w3.org/TR/webstorage/，sessionStorage的作用域仅限于“顶级浏览上下文”，这意味着它对每个浏览器标签页/窗口都是唯一的。然而localStorage的作用域是限于来源(origin)，这意味着它在同一来源的所有页面之间是共享的。 - broofa

好的，我会尽力进行翻译并保持原意。以下是需要翻译的内容：Re: Performance http://jsperf.com/localstorage-vs-sessionstorage - colllin

可能是什么是localStorage，sessionStorage，session和cookies之间的区别？的重复问题。 - SW4

Answer 1

localStorage 和 sessionStorage 都是扩展了 Storage。它们之间没有任何区别，只有 sessionStorage 具有“非持久性”的特性。

也就是说，在 localStorage 中存储的数据会一直存在，直到明确删除为止。所做的更改会被保存并可以在当前和未来访问该站点时使用。

而对于 sessionStorage，更改仅在当前标签页中有效。 所做的更改将保存并可用于该标签页中的当前页面，直到关闭该标签页。一旦关闭该标签页，存储的数据将被删除。

- tcooc

---

这里有一个更广泛的讨论，你可能会发现有帮助：https://dev59.com/hmIj5IYBdhLWcg3wzIFo - Ed Sykes

如果你将一些数据存储在HTTP下，那么你将无法在HTTPS下检索到它。 - Mark Thien

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

SessionStorage 可以在页面刷新和恢复后保留数据，但是在打开新的标签页或窗口时会启动一个新的会话。 - Patrick

Answer 2

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

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

- bren

Answer 3

以下几点可能有助于理解本地存储和会话存储之间的区别：

1. 本地存储和会话存储都仅限于文档来源，因此

   https://mydomain.example/ 
   http://mydomain.example/
   https://mydomain.example:8080/
   

   以上所有URL的存储是不相同的（请注意，网页路径不会影响网络存储）。

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

   本地存储和会话存储也由浏览器供应商进行范围限定。因此，IE保存的存储数据无法被Chrome或FF读取。

- functionoid

---

不会，同一个sessionStorage在http和https之间共享，但localStorage则不会。 - Shahdat

如果你先在https来源中设置sessionStorage，它将在http中可用，但是如果你在http中创建sessionStore，则不会在http中可用。 - Shahdat

@Shahdat，你是不是想说“那么将不再可用于HTTPS”（注意其中的 s）？ - Daniel Werner

是的，如果您在 HTTP 中创建 sessionStore，它将不可用于 HTTPS。 - Shahdat

Answer 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

- Eek

---

限制字符数量为 5101 k 字符？所以是 5.101 百万个字符？ - Zze

@Zze 是的，通常一个字符占用1个字节，因此500万个字符等价于5MB的存储空间。 - Basim Khajwal

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

请问您能否添加所提到的源代码？ - Mukus

@Mukus，没有源代码，我自己运行了测试，并且在使用私密模式Safari时遇到了问题。虽然存在localStorage但是存储空间为零，我的polyfill不能触发，因为localStorage已存在，但是脚本无法在其中存储任何内容。你可以使用此工具进行测试-http://dev-test.nemikor.com/web-storage/support-test/ - Eek

Answer 5

sessionStorage与localStorage类似，但它仅存储一次会话期间的数据，并且在创建该会话期间的浏览器窗口关闭时将被删除。

- Ahmad Santarissy

---

你是想用 tab 而不是 window 吗？ - Menai Ala Eddine - Aladdin

浏览器对标签页和窗口的处理方式相同。 - Ahmad Santarissy

Answer 6

• sessionStorage 维护着一个独立的存储区域，为每个给定的源进行存储，并在页面会话期间保持可用（只要浏览器开启，包括页面刷新和恢复）。

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

这段内容我从 Web Storage API 中获取。

- Linda Gutiérrez Montoya

Answer 7

就性能而言，我的（粗略）测量结果表明在1000次写入和读取方面没有任何差异。

就安全性而言，直觉上来看，sessionStore可能会在localStore之前关闭，但我没有具体证据 - 或许其他人有？

就功能而言，我同意digitalFresh的看法。

- cc young

---

关于页面加载性能：sessionStorage和localStorage都是在页面加载渲染周期之外初始化和填充的。因此，浏览器内部无法测量初始页面加载时间的影响。 - Mirko

Answer 8

在我看来，与本地存储相比，会话存储的优点是在Firefox浏览器中具有无限容量，并且不会持续更长时间。当然，这取决于你的目标是什么。

- avvett

Answer 9

Ya，session storage和local storage的行为方式相同，除了一个区别：local storage会一直存储数据，直到用户删除缓存和cookie，而session storage的数据将保留在系统中，直到我们关闭会话，也就是关闭创建的session storage窗口。

- Bhargavi

Answer 10

虽然晚了，但我感觉需要在这里补充一些点。

Session storage将只能在特定的选项卡中使用，而我们可以在整个浏览器中使用Local storage。两者都默认为同源，并且我们还可以使用键值对手动存储值（值必须为字符串）。

一旦浏览器的选项卡（会话）关闭，则Session storage将在该选项卡上 被清除，而在Local storage的情况下，我们需要 显式地清除它。最大存储限制分别为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();

P.S: getItem()方法返回的数据是字符串类型，我们需要将其转换为JSON格式才能访问其中的对象。

您可以在这里了解有关浏览器存储的更多信息。

1. localStorage、sessionStorage和cookies之间的区别

2. localStorage与sessionStorage

- Ganesh