关于 HTML5 LocalStorage 的 5 个不为人知的事实

//Get the value back out of localStorage

localStorage.getItem(‘key’);

//OR

localStorage.key;

//Clear all localStorage values

localStorage.clear();

localStorage API 非常简单，但是很容易忽略有关它们的一些重要细节。关于这个简单的 API，您可能不知道（或可能已经忘记）以下五件事：

1. Secure (SSL) 页面上的 LocalStorge 值是隔离的

---

根据草案规范，浏览器根据 协议 + 主机名 + 唯一端口（也称为HTML5 Origin）隔离 LocalStorage 值。主机名实现隔离是我们所预期的，因为我们不希望恶意网站访问我们网站的 LocalStorage 数据。但是协议为什么也隔离（即http和https）？

这种隔离的结果意味着保存到http://htmlui.com上的 LocalStorage 的值不能被从https://htmlui.com的页面访问（反之亦然）。

因此如果您的网站同时提供 HTTP 和 HTTPS 页面，请务必小心。（注意：Firefox 提供了一个专有的GlobalStorage，它没有这种 HTTP/HTTPS 隔离。）

2. SessionStorage 值在某些浏览器重启后仍然存在

---

SessionStorage 与 LocalStorage 不同，它不是为在用户浏览器中长期保存值而设计的。相反，SessionStorage 中的值会在浏览器会话结束时被销毁，这通常是在浏览器窗口关闭时。

不过有一个例外。

当浏览器提供“恢复会话”功能时，通常旨在帮助用户从浏览器/计算机崩溃中快速恢复，SessionStorage 中的值也将被恢复。因此，虽然它是服务器上的一个新“会话”，但从浏览器的角度来看，它是浏览器重启后单个会话的延续。

这使得 SessionStorage 成为一种理想的存储技术，用于临时“备份”用户表单值、在输入时将输入保存到 SessionStorage 以及在页面加载时恢复（如果存在），以进一步帮助用户从浏览器崩溃或意外页面刷新中恢复（尽管浏览器会自行执行其中的一些操作，尤其是在从崩溃中恢复时）。

3.以“隐身”模式创建的LocalStorage值是隔离的

---

当您在私人/隐身/安全模式（有时更粗略和准确地称为“se情模式”）下启动浏览器时，它将为 LocalStorage 值创建一个新的临时数据库。这意味着当隐私浏览会话关闭时，保存到 LocalStorage 的任何内容都将被销毁，从而使 LocalStorage 的行为更像 SessionStorage。

此外，由于浏览器的“会话恢复”功能不会重新打开私有模式会话，因此在浏览器窗口关闭后，在 SessionStorage 中创建的任何内容也将丢失。实际上，简而言之，在隐私浏览会话期间放入 Local 或 SessionStorage 的任何数据都会在浏览器窗口关闭（有意或无意）后立即丢失。

4. LocalStorage 配额不能大于 5MB

---

LocalStorage 不应该是 HTML5 的浏览器内存储的主要形式（IndexDB 才是），但某些应用程序可能需要LocalStorage提供不止5m的内存。有没有办法扩大 LocalStorage 配额？没有，没有的，别想了，你在想peach。

但是也有个旁门左道！

从技术上讲，LocalStorage 不会阻止同一主机（使用相同的协议和端口）的子域访问他的 LocalStorage 对象。因此，一些浏览器公开了一种解决方法，即授予“a1.website.com”和“a2.website.com”它们自己的 5MB LocalStorage 配额。并且由于两个站点位于同一来源，因此它们可以访问彼此的值。（安全方面注意：这也意味着共享域上的站点，例如 apphost.com，都共享一个 HTML5 存储对象。请谨慎操作！）

因此，虽然存在技术解决方法，但HTML5 Web 存储规范中特别不赞成它。。

但到目前为止只有 Opera 实现了规范的这一部分。所以现在，5MB 是你的现实限制。

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。