浏览器缓存

一、Cookie

1. cookie：

cookie比较老的前端缓存技术了，他的特点是想要使用它前端必须要有服务（静态网页是不行的）。因为只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送，而且由于浏览器的跨域限制，客户端和服务端必须要保证同源的原则，由于cookie是存放在前端的，所以安全问题一直是个大问题，因此一般重要的信息不建议放在cookie中存放。

2.特征：

（1）不同浏览器存放cookie的位置不一样，也不能通用。
（2）cookie的存储是以域名形式区分的，不同的域下存储的cookie是独立的。
（3）我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能操作的cookie是当前域以及当前域下的所有子域。
（4）一个域名下存放的cookie是有限的，不同浏览器存放的个数不一样，一般为20个。
（5）每个cookie存放的数据大小也是有限制的，不同浏览器存放大小不一样，一般为4KB。
（6）cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁。

3. 客户端设置：

document.cookie = '名字=值';
document.cookie = 'username=cfangxu; domain=baike.baidu.com'    //并且设置了生效域
//在设置这些属性时，属性之间由一个分号和一个空格隔开。

//当我们需要设置多个cookie时
document.cookie = "name=Jonh";
document.cookie = "age=12";
document.cookie = "class=111";

• 注意： 客户端可以设置cookie下列选项：expires(过期时间)、domain(服务器域名)、path(域名下的哪些路径可以接受Cookie)、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功），但无法设置HttpOnly选项。

二、session

1. session：

session是一种服务器端的机制，也就是能把信息存放在服务器端，所以安全可以保障。

2. 原理：

它的原理是通过session id 来识别客户端，这个session id 是存放在cookie中的。服务器会通过session id 来识别客户端进行匹配和判断。

3. session和cookie的区别：

（1）session保存在服务器中；cookie保存在客户端。
（2）session中保存的对象；cookie中保存的字符串。
（3）session不区分路径，同一个用户访问同一个网站期间，所有的session在任何一个地方都可以访问；cookie如果设置路径，则在某些地方不能访问。
（4）session需要借助cookie才能正常工作，如果禁用cookie，session则失效。
（5）重要状态走session，不重要走cookie。登录信息用session，购物车用cookie。

三、 localStorage

1. localStorage：

本地存储，HTML5的新方法，仅IE8以上浏览器兼容。

2. 特点：

（1）生命周期：持久化的本地存储，除非朱东删除数据，否则数据永远不会过期的。
（2）存储信息在同一个域中使共享的。
（3）当本页操作（增、删、改）了localStorage的时候，本页不会触发storage事件，但是别的页面会触发storage事件。
（4）大小：5M
（5）在非IE 下的浏览器可以本地打开。IE 浏览器要在服务器打开。
（6）localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
（7）localStorage受同源策略的限制。

四、sessionStorage

1. sessionStorage：

也是本地存储，会话本地存储

2. 特点：

用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁，或者在新窗口打开同源的另一个页面，sessionStorage也是没有的。

3. localStorage和sessionStorage的区别

（1）localStorage只要在相同的协议、主机名、端口下，就能读取/修改到同一份localStorage数据；sessionStorage比localStorage更严苛一点，除了协议、主机名。端口外，还要求在同一个窗口下。
（2）localStorage是永久存储，出非手动删除；sessionStorage当会话结束（当前页面关闭的时候），自动销毁。