Web Storage的概念和用法

Web Storage的两种机制是sessionStorage和localStorage：
sessionStorage在页面会话期间，有单独的一块儿存储空间是给这个域的，直到页面被关闭；
特点：

1. 只存储会话的数据，关闭浏览器，数据就被清除。
2. 数据不会被传输到服务器。
3. 存储限制大于cookie（最多5 MB）。

localStorage做一样的事情，只不过当浏览器关闭再打开的时候它还存在；
特点：

1. 没有过期限制，通过javascript清除，或者清除浏览器缓存/本地存储的数据。
2. 存储限制是三者中最大的。

sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，这点和 session cookies 的运行方式不同。

通过 Window.sessionStorage和Window.localStorage可以实现这两种机制；

三者的异同

浏览器无痕窗口/隐身模式（Private Browsing / Incognito modes）
显然在无痕窗口是不存储历史数据和cookie的；要特别注意在这种模式下，web storage机制是否还能正常工作。
Session和Cookie的区别
Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。
Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式。
References:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API