SessionStorage 和 LocalStorage 生命周期 以及 浏览器刷新操作意味着什么？

SessionStorage 和 LocalStorage 的辨析

SessionStorage 和 LocalStorage 是浏览器提供的两种数据存储机制，当然这种实现是依据 HTML5 Web 存储标准，具体使用非常简单大家可以自行查阅相关资料。此外目前还有两种很有用的前端存储机制分别叫做 WEB SQL、IndexedDB（这里注意的是：Web SQL 已经不再是 W3C 的标准，不过有意思的是 w3c 表示不将其纳入标准这么多年之后，浏览器中至今仍有 chrome 依然毫不犹豫的支持该标准，Firefox、edge、IE 均已不在支持。详情点击查看）Web SQL 是后端程序员熟知的关系型数据库，具体实现采用的是智能手机中常用的微型关系数据库 SQLite。而 indexedDB 则是后端程序员熟知的另一种非关系型数据库 （NOSQL），即近几年新流行起来的非关系型数据库，如果你不熟悉那就可以简单的理解成 key-value 形式的存储模型，感兴趣的可以自行搜索了解更多。这些内容不再本次讨论范围内。

SessionStorage 和 LocalStorage 使用操作基本类似，两者最主要的区别在于生命周期不同，SessionStorage 顾名思义就是存在与会话阶段，当会话结束时，SessionStorage 存储的数据即会失效。那么关键来了什么才表示会话结束？其实在浏览器中一个活动标签页即代表一个会话【Session 说道这里，可能对后端比较熟悉的小伙伴会想到 HTTP 会话中 SessionID，没错这里两者存在一定的联系，但并不完全等同，由于 session ID 存在是为了解决 HTTP 协议的无状态性，要使基于 HTTP 协议的会话能够得以维持就需要通过 session id 来实现，并且 session 的实现依赖的是 cookie 机制，OK 点到为止，详情大家自行查阅】，如果当前标签页被关掉即代表，当前会话结束，此时当前 SessionStorage 中存储的数据就会被浏览器自动销毁。

相比之下 LocalStorage 生命周期就很长了，LocalStorage 是可以一直存活的，哪怕是你关闭浏览器，他依然存在。除非人为手动删除，所以我们可以将一些需要永久性存储的数据放置在 LocalStorage 中（当然也可以是 Cookie 中，当然鉴于 cookie 的特自动携带传输的特性，如果不是每次都有必要携带的数据请求就不要放在 cookie 中，这样不仅浪费带宽，而且通常情况下前考虑到安全性，一般都是不允许前端使用 JS 直接操作 cookie 的），而那些只需要在会话阶段需要存在的数据则放在 SessionStorage 中。

最后再多啰嗦一句，尽管这些存储机制都有自己的一些特色，但是他们也都遵循一条原则，那就是 “同源策略”。关于同源策略铺开讲也内容也是很多的，大家可以自行搜索了解。

自己之前的几个疑问？

1. 那么使用浏览器打开两个同样的网站，这两个网站的 SessionStorage 是共享的吗？

答案：当然是不能共享的。不明白的话仔细阅读第二段话。

2. 当我们重新刷新一个页面那么 SessionStorage 中的数据会消失吗？

答案：当然还是不会，即使你使用的是强制刷新仍旧不会使 SessionStorage 数据消失，即 SessionStorage 里面的数据只会在当前活动的标签页中关闭掉之后才会消失。

3. 浏览器刷新到底做了什么？

浏览器刷新做的只是重新加载网页数据【强制刷新的区别只是不使用浏览器缓存下来的HTML、JS数据，所有本页面用到的HTML、JS都需要重新向服务器获取】，并重新解析生成 DOM 树，当然还同时会重新解释执行 JavaScript 代码，之后重新绘制页面，注册绑定事件，之前页面在活动的时候对 JavaScript 变量做的数据赋值数据都会消失。

PS：个人在使用前后端完全分离的开发的模式的情况下，更喜欢使用 SessionStorage 和 LocalStorage 来进行数据存储。感觉这两种存储方式非常适合 SPA 这种开发模式。