概念

浏览器缓存主要是指http请求的缓存，作用是不言而喻的，能够减少资源请求，极大的改善网页性能，提高用户体验。浏览器第一次获取到资源后，然后根据返回的信息来告诉如何缓存资源，可能采用的是强缓存，也可能告诉客户端浏览器是协商缓存，这都需要根据响应的header内容来决定的。

一、http缓存

http缓存是存在于服务器与浏览器之间，是一种保存资源副本并在下次请求时直接使用该副本的技术。web缓存发现请求资源已经被存储，它会拦截请求，返回资源副本，而不会去服务器重新请求资源。

二、Cookie

Cookie主要是由服务器生成，且前端也可以设置，保存在客户端本地的一个文件，通过response响应头的set-Cookie字段进行设置，且Cookie的内容自动在请求的时候被传递给服务器。如下：

[HTTP/1.1 200 OK]
Server:[bfe/1.0.8.18]
Etag:["58860415-98b"]
Cache-Control:[private, no-cache, no-store, proxy-revalidate, no-transform]
Connection:[Keep-Alive]
Set-Cookie:[BDORZ=27315; max-age=86400; domain=.baidu.com; path=/]
Pragma:[no-cache]
Last-Modified:[Mon, 23 Jan 2017 13:24:37 GMT]
Content-Length:[2443]
Date:[Mon, 09 Apr 2018 09:59:06 GMT]
Content-Type:[text/html]

Cookie包含的信息：

它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。一个网站只能读取它自己放置的信息，不能读取其他网站的Cookie文件。因此，Cookie文件还保存了host属性，即网站的域名或ip。

这些属性以名值对的方式进行保存，为了安全，它的内容大多进行了加密处理。Cookie文件的命名格式是：用户名@网站地址数字.txt

Cookie的优点：

给用户更人性化的使用体验，如记住“密码功能”、老用户登录欢迎语

弥补了HTTP无连接特性

站点统计访问人数的一个依据

cookie可以设置有效期，超出有效期自动清除。

Cookie的缺点：

它无法解决多人共用一台电脑的问题，带来了不安全因素

Cookie文件容易被误删除

一人使用多台电脑

Cookies欺骗。修改host文件，可以非法访问目标站点的Cookie

容量有限制，不能超过4kb

在请求头上带着数据安全性差

只能存储字符串类型。

三、 localstorage

localStorage主要是前端开发人员，在前端设置，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。

localStorage是HTML5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。

优点：

localStorage拓展了cookie的4k限制

localStorage可以将第一次请求的5M大小数据直接存储到本地，相比于cookie可以节约带宽

localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

缺点：

需要手动删除，否则长期存在

浏览器大小不一，版本的支持也不一样

localStorage只支持string类型的存储，JSON对象需要转换

localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

四、sessionStorage

sessionStorage主要是前端开发人员，在前端设置，sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失

存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下

五、WebSQL

websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现，主要有以下特点：

Web Sql 数据库API 实际上不是html5规范的组成部分;

在html5之前就已经存在了，是单独的规范;

它是将数据以数据库的形式存储在客户端，根据需求去读取;

跟Storage的区别是： Storage和Cookie都是以键值对的形式存在的;

Web Sql 更方便于检索，允许sql语句查询;

让浏览器实现小型数据库存储功能;

这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持;

六、indexDB

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

七、 flash缓存

这种方式基本不用，这一方法主要基于flash有读写浏览器端本地目录的功能，同时也可以向js提供调用的api，则页面可以通过js调用flash去读写特定的磁盘目录，达到本地数据缓存的目的。

Flash缓存是FlashPlayer存储在设备上的数据，如果用户常常碰到在线视频无法观看、网页游戏、小游戏无法正常打开的情况，这时就需要尝试清理一下Flash缓存

浏览器的缓存

概念