缓存（Cookie SessionStorage localStorage）详解

一.缓存

浏览器缓存：Cookie,SessionStorage,localStorage缓存

缓存在浏览器

查看：浏览器

作用：提高访问速度

场景：1.存储用户信息 2.缓存浏览器记录 3.草稿箱，自动保存

位置：浏览，http缓存，服务器，CDN

浏览器缓存

js:cookie

html5:sessionStorage,localStorage

使用：1.cookie

document.cookie=“键值对”

二.html5 sessionStorage,localStorage

cookie,本地缓存，本地存储

区别:

1.Cookie主要用于用户信息的存储, 容量为4KB，当你存储的内容在每次请求后端的时候都需要的情况下才需要放到 Cookie 中

用户信息，跟与后台传输数据相关，可以设置过期时间,容量为4KB

2.localStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止，容量最大为5M

自带草稿功能，纯浏览器，只能手动移除

3.sessionStorage

会话,会话结束，数据清除，页面与页面传参

使用场景

1.localStorage可以用来统计页面访问次数

2.sessionStorage 可以用来统计当前页面元素的点击次数

3.cookie 一般存储用户名密码相关的信息，一般可以使用escape转义编码后存储

三.本地存储

localStorage.setItem(“username”,“9909”);

localStorage.getItem(“username”);

window.localStorage;

cookie

//1.获取cookiefunction getCookie(key){var cookies = document.cookie;var cookieArr = cookies.split("; ");for(var i=0;i<cookieArr.length;i++){var infoArr = cookieArr[i].split("=")if(infoArr[0]==key){return decodeURI(infoArr[1])}} }//2.设置cookie 过期时间==>有效期；function setCookie(key,value,t){var date = new Date();//对象date.setDate(date.getDate()+t)document.cookie = key+"="+encodeURI(value)+";expires="+date.toGMTString()}//3.移除cookiefunction removeCookie(key){setCookie(key,"",-1)}