SessionStorage 和 LocalStorage 的辨析

SessionStorage 和 LocalStorage 是浏览器提供的一个数据存储机制，是 HTML5 Web 存储标准的实现，具体使用非常简单大家可以自行查阅相关资料。此外目前还有一种很有用的前端存储机制叫做 WEB SQL，新版的浏览器大都支持，感兴趣的可以自行了解。

SessionStorage 和 LocalStorage 使用操作基本类似，两者最主要的区别在于生命周期不同，SessionStorage 顾名思义就是存在与会话阶段，当会话结束时，SessionStorage 存储的数据即会失效。那么关键来了什么才表示会话结束？其实在浏览器中一个活动标签页即代表一个会话【Session】，如果当前标签页被关掉即代表，当前会话结束，此时当前 SessionStorage 中存储的数据就会被浏览器自动销毁。

相比之下 LocalStorage 生命周期就很长了，LocalStorage 是可以一直存活的，哪怕是你关闭浏览器，他依然存在。除非人为手动删除，所以我们可以将一些需要永久性存储的数据放置在 LocalStorage 中（当然也可以是 Cookie 中），而那些只需要在会话阶段需要存在的数据则放在 SessionStorage 中。

自己之前的几个疑问？

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

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

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

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

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

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

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