浏览器缓存

       浏览器缓存（Browser Caching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体 上加速网页展示给用户。当你打开一个网页，浏览器会自动下载副本到你电脑上，就相当于你另存为网页到某个地方。当然不是浏览器能把各种网页都能下载到本地电脑上，它是有特殊情况。一般html，后者request是get请求，而post一般不缓存。 当然客户端缓存是否需要是可以在服务端代码上控制的。那就是响应头。 响应头告诉缓存器不要保留缓存，缓存器就不会缓存相应内容； 如果请求信息是需要认证或者安全加密的，相应内容也不会被缓存；

< meta http-equiv= "Pragma" content= "no-cache" >

< meta http-equiv= "Cache-Control" content= "no-cache" >

< meta http-equiv= "Expires" content= "0 ”>

一、cookie

来源：http是无状态请求，早期为了确认用户/浏览器身份，需要在url中手动加参数传递，容易出错，后期出现了cookie来解决这个问题。   所以 当每一次网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。所以为了不增加网络开销，在用cookie的时候，我们要确定好什么数据适合存储在cookie中。

1、哪些数据适合存在cookie中？

      如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。cookie数据的主要作用于辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。登录时用户勾选“保存用户名和密码”，数据存在哪里？

2、cookie的特征

    （1）不同的浏览器存放的cookie位置不一样，也是不能通用的。

    （2）cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。

    （3）我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域

    （4）一个域名下存放的cookie的个数和存放的内容大小是有限制的。

浏览器	支持域名个数	最大长度
IE7以上	50个	4095B
Firefox	50个	4097B
Opera	30个	4096B
Safari/WebKit	无限制	4097B

    （5）cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁

3、cookie的使用

    （1）设置： 客户端可以设置cookie 的下列选项：expires（新协议使用max-age代替，但是不兼容ie，所以一般还使用expires）、domain、path、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功）。如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间。如果不设置，cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

    （2）读取

    （3）修改

    （4）删除：报错、退出、登录（存储的数据有标志位）时要全部清除掉cookie，清除的方式有将值设为null或者将日期设为过期。

4、cookie的安全性

      secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其他安全协议时，包含 secure 选项的 cookie 才能被发送至服务器。把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息。机密且敏感的信息绝不应该在 cookie 中存储或传输，因为 cookie 的整个机制原本都是不安全的。

https://www.zhihu.com/question/19786827

5、http cookie

 防跨域脚本拿到cookie

二、localStorage

1、localStorage的特征

• 生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
• 存储的信息在同一域中是共享的。
• 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
• 大小：(如果数据存放超过最大限制会报错，并移除最先保存的数据。)

• 浏览器	最大长度
  IE8以上	5M
  Firefox 8以上	5.24M
  Opera	2M
  Safari/WebKit	2.6M

• 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
• localStorage受同源策略的限制

2、使用

    （1）设置： localStorage.setItem('key’,'value');

    （2）获取： localStorage.getItem('key')  或者 localStorage.key(0) #获取第一个键名

    （3） 删除： localStorage.removeItem('username’)， 也可以一次性清除所有存储  localStorage.clear()

三、sessionStorage

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

四、cookie、localStorage、sessionStorage的区别

• 相同：在本地（浏览器端）存储数据
• 不同：
  localStorage、sessionStorage
  localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。(如果换网络呢？）
  sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
  localStorage是永久存储，除非手动删除。
  sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
  cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。

五、indexDB

         indexedDB 用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案。 IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 本来是要用于仅供 Web Workers 内部使用，但是还没有被任何浏览器所实现。异步 API 在 Web Workers 内部和外部都可以使用，另外浏览器可能对indexDB有50M大小的限制，一般用户保存大量用户数据并要求数据之间有搜索需要的场景。

https://segmentfault.com/a/1190000012578794

六、application cache 、cacheStorage、flash缓存

http://blog.csdn.net/u011001084/article/details/53005615

清除浏览器缓存的几种方法：

http://www.haorooms.com/post/js_llq_hc