之前有篇谈论前端缓存的文章因为没有详细展开前端浏览器缓存的内容，所以今天我们来探讨一下前端浏览器的本地缓存。本章内容主要以sessionStorage和localStorage以及cookie来展开叙述。

一.sessionStorage和localStorage  
使用localStorage和sessionStorage之前,即使现在绝大多数浏览器都支持这两种方法。以防不时之需还是得检查一下：

if (window.localStorage) {
    alert('浏览支持 localStorage');
} else {
    alert('浏览暂不支持 localStorage');
}

localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失。使用localStorage缓存的数据可以进行跨页面通讯。一个窗口存储的数据在另一个窗口可以拿到。

localStorage用法：

//堆代码 www.duidaima.com
//存储
localStorage.setItem("key","val");
//读取
localStorage.getItem("key","val");
//删除指定键
localStorage.removeItem("key","val");
//删除全部
localStorage.clear();

sessionStorage: sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的。

但事无绝，根据MDN的说法：
1.页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
2.在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文， 这点和 session cookies 的运行方式不同。
3.打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
4.关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。
对于上面的说法，第134点相信都是符合大家认知的，那第二点是啥意思呢？
根据挑灯的理解给大家用大白话来说就是：在当前页打开的新页面会复制上个页面的sessionStorage内容，但不会共享，只是复制。

sessionStorage用法：

//存储
sessionStorage.setItem("key","val");
//读取
sessionStorage.getItem("key","val");
//删除指定键
sessionStorage.removeItem("key","val");
//删除全部
sessionStorage.clear()

结论
1、localStorage可以跨页面通讯。sessionStorage不可以跨页面通讯
2、localStorage不会随着页面关闭而被清除，他只能手动清除。sessionStorage会随着页面的关闭而清除。
3、localStorage和sessionStorage的存储大小都是5M。

二.cookie
cookie: cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4K左右, 有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。

如何创建cookie：
当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器（自动的）。在创建Cookie是可以设置很多属性，如Expires、Max-Age、Domain、Path、Secure、HttpOnly，因为它会自动携带到服务器端，同时又支持服务器端设置。所以有很多的方面要注意，比如时效性、作用域、安全性。下面就从这三个方面来解释他属性的作用。

①时效性：
如果在Set-Cookie时不通过Expries、Max-Age两个字段设置Cookie的时效性，那么这个Cookie是一个简单的会话期Cookie。它在关闭浏览器是会被自动删除。如果设置了Expries、Max-Age那么这个Cookie在指定时间内都是有效的。
注意：当Cookie的过期时间被设定时，设定的日期和时间只与客户端相关，而不是服务端。
②作用域：
Domain 和 Path 标识定义了Cookie的作用域：即Cookie应该发送给哪些URL。Domain 标识指定了哪些主机可以接受Cookie。如果不指定，默认为当前文档的主机（不包含子域名）。如果指定了Domain，则一般包含子域名。Path 标识指定了主机下的哪些路径可以接受Cookie（该URL路径必须存在于请求URL中）。以字符 %x2F ("/") 作为路径分隔符，子路径也会被匹配。

③安全性：
标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端。但即便设置了 Secure 标记，敏感信息也不应该通过Cookie传输，因为Cookie有其固有的不安全性，Secure 标记也无法提供确实的安全保障。
注意：从 Chrome 52 和 Firefox 52 开始，不安全的站点（http:）无法使用Cookie的 Secure 标记。
为避免跨域脚本 (XSS) 攻击，通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端。
如何在浏览器操作Cookie：
JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";
// 堆代码 www.duidaima.com
//您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
//您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//cookie的读取
var x = document.cookie;
//cookie的删除
//删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

现在有js-cookie，有兴趣可以了解一下
注意：在服务器端Set-Cookie有设置HttpOnly=true时,document.cookie访问不到cookie内容。
通常面试的时候cookie和session都是拿来做话题，这里简单说几个：
1、session储存在服务端，cookie储存在客户端
2、session比cookie更安全，因为session储存在服务端
3、session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中。
4、cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现session的一种方式。

最后来讲讲sessionStorage、localStorage和cookie的区别：
相同的地方:都是保存在浏览器端、且同源的

不同的地方：
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 
2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 
3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 
4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 
5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 
6、web Storage的api接口使用更方便