浏览器缓存机制详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u012657197/article/details/73469131

#浏览器缓存机制#

服务器收到请求后，会设置Set-cookie响应头，浏览器收到后就会将其存到本地，可设置失效时间，类似 Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly，其中Secure
存放数据大小为4K左右
cookie会伴随客户端请求发送到服务器，每次都会携带在HTTP请求报头中，保存数据过多会带来性能问题，尤其是移动环境

设置cookie

document.cookie='name'+name+';expires='+(new Date()+100000)+';path='+path

读取cookie

var cookie = document.cookie

解析cookie

'{"'+document.cookie.replace(/;\s*/gim,'","').replace(/=/gim,'":"')+'"}';

清除cookie

document.cookie='name'+name+';expires='+new Date()+';path='+path

localStorage和sessionStorage一般为5M，仅在浏览器端保存，不参与通信

cookie是doccument的方法，而localStorage，sessionStorage是window方法。
同域名下（协议，端口，主机号）localStorage可访问，不管路径。
从当前页面跳转到同域名下的其他页面时sessionStorage才可访问，若直接打开同域名子路径下或同路径下的的页面时，sessionStorage不能访问，除非跳转到上一级路径对应的页面后再跳回来才可以访问。
同域名同级路径下的cookie可访问，同域名子路径下的cookie不能访问，但子路路径可访问父路径下的cookie。

应用程序缓存，以下优势

添加demo.manifest文件，内容为：

CACHE MANIFEST 此标题下的文件首次下载后缓存
NETWORK 此标题下不会缓存
FAILBACK 不能访问页面时应展现的内容
例如：FAILBACK：
/html5/ offline.html 表示用offline.html替换请求``/html5/`文件下所有请求出错的页面。

设置html标签

<html manifest="demo.manifest">
</html>

注意：manifest文件需要在服务器上正确的配置MIME-type，即text/cache-manifest

缺点

到期时间是服务器时间，可能存在误差，
可设置expires=max-age+每次下载时的当前request时间
可用meta标签<meta http-equiv="expires" content="mon, 18 apr 2016 14:30:00 GMT">可将content设为0或者-1即不缓存
Pragma 优先级高于expires