一.什么是浏览器缓存
浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。而页面需要数据时,如果浏览器已经保存了之前请求过的数据将不会再次请求Web资源。详细如下:例下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果 网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。二.为什么要缓存浏览器资源
1) 降低网络带宽消耗带来运营成本.
因为我们都知道当我们浏览网页时,就意味着多次的下载,无论是’‘体积’'小的文字还是’体积’大的图片视频,这些都会占用我们的带宽，带宽即金钱，过多的带宽消耗，会使运营成本大大增加。当Web缓存被使用时，只会产生极小的网络流量，可以有效的降低运营成本。
2) 缓解服务器自身压力
当页面资源被存储后,且页面不发生改变时,我们是可以反复调用浏览器缓存的资源的,避免了多次请求源服务器,这就间接地缓解了源服务器的压力;同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。3) 减少网络延迟，加快页面打开速度
用户在使用浏览器时,最直接的体验可能就是打开浏览器的速度了,毕竟一个页面等半天确实是件让人抓狂的事,但这等待的时间浏览器确实也没闲着, 它在忙着从源浏览器下载东西,这时'懒惰'的人类可能就要问一句,就不能一下子''拿''给我吗?!此时如若之前已经存储好,不就可以直接''拿''了吗,这省去的可是大把的等待时间,故浏览器缓存能够明显加快页面打开速度，使用户达到更好的体验.三.常见的浏览器缓存方法
存 Cookie ?
存 本地库(LocalStorage) ?
还是存 SessionStorage ?
其实三者用于浏览器缓存数据都很常见,但使用它们还是要分场合的,因为他们各有优缺点:[ cookie ] :
存储在用户本地终端上的数据。有时也用cookie，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站,要说cookie的生命周期,如若用户不给其设置生命时长,则cookie在用户关闭浏览器后就将不复存在.缺点:主要是cookie的大小和多少都受限制，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用.
[ sessionstorage ] :
针对一个 session 的数据存储,当用户关闭浏览器窗口后，数据会被删除,由此可见他的生命周期为用户开启着浏览器的时间段,所以需要长期存储的资源,适用此种方法就不妥,这时就要考虑第三种方式.但是不同窗口下的sessionStorage，存储相互独立；互不干扰,这是它的一大亮点.缺点:虽然sessionstorage的容量比cookie大,但是浏览器关闭时,里面存储的数据依旧会消散.
[ localstorage ] :
不难看出local是本地,使用此种方法自然是将资源存储在本地浏览器中,不会受浏览器关闭之''苦",故存储在localstorage的数据,只要你不手动删除,它们就仍在那不离不弃.缺点:虽然localstorage缓存的数据会永久保存,但是再大的容量总有一天也会"满'',而且随着存入的数据越来越多,会越来越卡,所以手动清除localstorage的数据是很有必要的!而且不同窗口下数据不能独立，相互干扰。例如：删除或添加一个数据，其它的窗口也会同步删除或者添加该数据.
[ 想法 ] :
大家都订过外卖,咱们不妨看看选餐的页面,可以看到页面中渲染了后台传输过来的菜名,价格等数据,这需要调用后台接口,虽然接口可以被反复调用,但次数太多就增加了服务器的负担,而此时我们就可以把第一次通过接口请求得到的数据存入localstorage里面,页面中需要渲染相同数据时就可以直接从本地"拿"数据,而且用户直接操作的临时数据都可以存储在里面,在最后提交订单的时候取出来一并提交,或者在下一个页面直接使用也可以呦,而且存入只存最后一次更改的值,所以完全不用担心本地的数据不改变的问题..
四.Cookie,LocalStorage,SessionStorage 的增删改查方法 (Jquery)
1) 创建新的cookie:
$.cookie(cookie名，生命周期);$.cookie(键名, 值, { expires: 7 }); //设置为7天，默认值：浏览器关闭
2) 设置cookie的域名：
$.cookie(cookie名，生命周期, {domain:'qq.com'}); //设置域名为'qq.com'的cookie3) 设置cookie的路径：
$.cookie(cookie名，生命周期, {domain:'qq.com' 路径}); //设置一个值为'dumplings'的在域名'qq.com'的路径为...的cookie4) 删除cookie
$.removeCookie(cookie名,路径); //path为指定路径，直接删除该路径下的cookie $.cookie(cookie名,null,{ path: '/'}); //将cookie名为‘openid’的值设置为空，实际已删除5) 获取cookie
$.cookie(cookie名)[ 经验 ]
cookie的域名和路径都很重要，如果没有设置成一致，则会有不同域名下或者不同路径下的同名cookie，为了避免这种情况，建议在设置cookie和删除cookie的时候，配置路径和域名。1) 创建localstorage和sessionStorage
var sessionData=window.sessionStorage;var localData=window.localStorage;
2) 存入sessionstorage和存入localstorage
sessionData.setItem('属性名',属性值);localData.setItem('属性名',属性值);
3) 指定删除sessionstorage数据和localstorage数据
sessionData.removeItem('属性名');localData.removeItem('属性名');
4) 清空sessionstorage和localstorage数据
sessionData.clear()localData.clear()