cookie方法封装
cookie
cookie: 是一种缓存手段:
什么是缓存:
把已经请求到的数据 存储一份 为了方便下次快速访问
比如页面的图片 文字 视频 好多音视频资源是浏览器自主完成的
缓存的目的是为了提高 访问速度
在js中cookie的使用:
document.cookie
cookie的时长:
如果存储时
没有指明当前cookie的存储时长
则默认一次会话
只要浏览器不关闭 cookie一直在
就算是切换浏览器标签页 数据也会在
session不一样 session切换标签页就数据丢失了
如果指明了 cookie的存储时长
那么只要超过这个时长 cookie自动失效
$("button").eq(0).click(function () {console.log(document.cookie);}) 存储cookie
document.cookie="键=值"
document.cookie="键=值"
document.cookie="键=值"
只能一次存储一个键值对
$("button").eq(1).click(function () {document.cookie="name=小砌墙";document.cookie="age=16";document.cookie="location=文化大厦";document.cookie="length=198";})储存帯时长的cookie
$("button").eq(2).click(function () {
// 存储带时长的var date=new Date();var ms=date.getTime()+1000*30;
// console.log(ms);var futureDate=new Date(ms);//未来时间的Date格式 需要调用toGMTString()方法转换成GMT格式document.cookie="name=小砌墙";document.cookie="location=文化大厦; expires="+futureDate.toGMTString();}) 取出所有cookie:
document.cookie
取出的格式是: 键1=值1; 键2=值2; 键n=值n
类型是字符串 我们要自己解析
修改:
document.cookie="已经存储过的键=新值";
键如果不存在 则 新增一份键值对
如果键已经存在 则修改新值
删除cookie:
删除一个cookie需要用到生死簿(存活时间)
document.cookie="键=值; expires=一个GMT时间格式"
GMT时间格式:
Wed Dec 04 2019 10:56:40 GMT+0800 (中国标准时间)
1575428424957
再次针对已经存储过的键 存储一次 值无所谓
必须把到期时间变成过去时 就可以删除了
无论这个cookie是否带时长 只要修改成过去时 就自动删除
document.cookie="要删除的键=随便; expires=一个过去时间的GMT格式"
cookie方法封装
var cookie={//根据毫秒值返回未来时间的GMT格式getGMTString:function (ms) {if(typeof ms !="number"){return;}// 获取当前时间的毫秒值var nowMS=new Date().getTime();var futureDate=new Date(nowMS+ms);//把GMT格式返回return futureDate.toGMTString();},// 1.增加cookie 传入json进行批量增加/*expiresMS表示本次存储的cookie时长的毫秒值expiresMS是可选的 如果不传则 不指明时长*/addItem:function (json,expiresMS) {//5000 毫秒值if(!json){return;}for(var k in json){if(expiresMS && typeof expiresMS=="number"){document.cookie=k+"="+json[k]+"; expires="+this.getGMTString(expiresMS)// document.cookie="name=小砌墙; expires=GMT格式";}else{//没有传第二个参数 那就没有时长 那就直接存储cookiedocument.cookie=k+"="+json[k];}}},// 删除指定cookie (根据键删除指定cookie)removeItem:function (key) {var cookie=document.cookie;if(!cookie){//如果本地cookie为空 就啥也别玩了return;}// 如果不为空 那么就直接设置一个新cookie 但是 时长为过去时//只要时长是过去时 那么既不会新增 又可以把原来的同一个键的删除document.cookie=key+"=随便; expires="+this.getGMTString(-1000);},// 修改cookiemodifyItem:function (oldkey,newVal) {var cookie=document.cookie;if(!cookie){//如果本地cookie为空 就啥也别玩了return false;}if(this.getAllCookies()[oldkey]!=undefined){// 如果键存在 那么就修改document.cookie=oldkey+"="+newVal;return true;}else{// 如果键不存在return false;}},// 获取所有cookie返回json getAllCookies:function () {var cookie=document.cookie;if(!cookie){//如果本地cookie为空 就啥也别玩了return "";}var json={};var arr=cookie.split(";");// console.log(arr);for(var i=0;i<arr.length;i++){//这个arr里面包含 key和value newArr[0]是键 newArr[1]是值var newArr=arr[i].trim().split("=");// console.log(newArr);//把键值对放入json里面json[newArr[0]]=newArr[1]}return json;},//根据键获取指定的值getItem:function (key) {var cookie=document.cookie;if(!cookie){//如果本地cookie为空 就啥也别玩了return "";}return this.getAllCookies()[key];},
// 清空所有cookieclear:function () {this.addItem(this.getAllCookies(),-1000);}}//对象结尾
/*
* cookie的封装:
* 1.增加cookie 传入json进行批量增加
*
* 2.删除cookie 传入指定键 删除cookie
*
* 3.修改cookie 键不存在 则不修改 键存在再修改
*
* 4.获取所有cookie 返回json
*
* 5.获取单个cookie 传入键 获取指定cookie的值
*
* 6.清空所有cookie
*
*
*
* */本文章参考其他博主的文章，保存是方便查找 ， 以下是地址
Web前端-JavaScript--常见本地存储三种方式_前端三种本地存储方式_yanghainan0318的博客-CSDN博客
