关于前端缓存cookie sessionStorage lacalStorage

cookie

cookie的写入：

document.cookie="name=jiangmu"

document.cookie="class=132"

注意一点，这里与一般的赋值不同，每一次的赋值自动去检测等号前面的key是否存在，存在则做修改，不存在则新增一个cookie的键值对

//"name=jiangmu;class=132"

cookie的修改：

document.cookie="name=jiang"

//"name=jiang;class=132"

cookie的删除：

每个cookie的键值对都存在一个有效时间戳，利用这个时间戳可以删除一个cookie

var now = new Date();

var lastmin = new Date(now.getTime()-60000).toGMTString()//获取上一分钟的时间的GMT时间字符串，将作为cookie有效时间戳

document.cookie="name=12; expires=" + lastmin

这个时候cookie就过了保质期了，name这个键值对被删掉

"class=132"

cookie的读取

我自己写了一个读取cookie的方法，这个方法没处理cookie的key值包含"="的情况，也没有处理key值为空的情况，自行加逻辑

function getCookie(name){

if(!key)return;

var cookieObj = {};

var cookieStr = document.cookie;//获取到cookie字符串

var cookieArr = cookieStr.spilt(';');//根据cookie的特性获取到每个以分号隔开的键值对数组，每个键值对class=132

cookieArr.forEach(function(element){

     var key = element.split('=')[0];

     var value= element.split('=')[0];

     cookieObj[key]=value

})

return cookieObj[name]

}

杠精时刻：

document.cookie = "meinv=yl;old=18"这个时候只会存进去一个"meinv=yl"

document.cookie = "piaoliang"这个时候会存进去一个key值没有，value为"piaoliang"的cookie值

可以通过document.cookie="=123; expires=" + lastmin来删除

document.cookie="old==18"会存进去一个"old==18" =18作为一个value值被存储，至于你自己作的怎么取值自行解决

seesionStorage

回话型缓存，只要当前窗口关闭或者浏览器关闭，就会清掉，当前窗口有效

增加/修改

window.sessionStorage.setItem(key,value)//value必须是字符串格式，其他格式自行转字符串，并且字符串必须小于5M

查询

window.sessionStorage.getItem(key)//存进去的是字符串，拿到的也肯定是字符串，要对象啥的自行转换

删除

window.sessionStorage.removeItem(key)//删除单个sessionStorage

window.sessionStorage.clear()//清掉所有的

 

localStorage

写入用户硬盘中浏览器文件的，除非去清掉，否则会一直存在。同源共用

增加/修改

window.localStorage.setItem(key,value)//value必须是字符串格式，其他格式自行转字符串，并且字符串必须小于5M

查询

window.localStorage.getItem(key)//存进去的是字符串，拿到的也肯定是字符串，要对象啥的自行转换

删除

window.localStorage.removeItem(key)//删除单个sessionStorage

window.localStorage.clear()//清掉所有的

 

304

304作为一个状态码，告诉你的是你上一个连接请求回来的数据还可以用，不需要再去服务器上拿

可以由后台设置，在返回头设置当前的时间戳，有效时间（秒）当下一次的相同请求在有效时间内，浏览器会帮你把上一次请求拿到的东西再次递给你，就好像你让浏览器去问服务器今晚六合彩开什么特码，第一次浏览器去问了，服务器告诉你开50，并和你说我记住现在的时间，两天后会再次开奖，在这两天内你不要再来问了都是50，结果半个小时过去了你忘了你又让浏览器去问，浏览器发现还没到下次的开奖时间，那就直接把上次的50再告诉你一次

当然前端也可以在请求头上设置缓存，类似于假如我在一天内问了你多次特码是什么，那么你只要告诉我今天第一次你告诉我的值就好了

当然浏览器那么好欺负，不欺负她可惜了，遇到一个脾气不好点的前端，也可以在请求头设置，反正我不管问你几次，每次你都要给我去拿最新的回来

这个在后面http请求头里面做详解，只是提到缓存说一下

 

个人观点，爱听不听：

cookie一般是简单的小的存储，用于和服务器做通信。只有4K

localStorage用于较大的存储，但是毕竟不是数据库，可以做一些不常改动的静态资源存储，例如地图边界文件等，但是记得他一个键值对的value只能存5M

sessionStorage用于较大的存储，session不会跨窗口生效，利用好每次关浏览器就会自动清除的特性，对一些值进行存储，例如一些不同路由间的参数传递什么的