JavaScript基础 cookie
2018-03-15 本文已影响0人
0说
cookie存储数据
存储在本地电脑，以便下次访问
自动填写密码，账号都是cookie存储
会跟后台交互，最大存储4KB
请求数据的时候它也会跟着发送
以名值对
设置cookie
document.cookie = ' jmens = 6666 ';
document.cookie = ' ali = 9999';
document.cookie = ' afei = 8888';
console.log( document.cookie );
打印出来
浏览器中的cookie
图片.png
关闭浏览器就会清除cookie
注意：不能下面这样设置
document.cookie = ' jmens = 6666 ; ali = 9999 ; afei = 8888 ';
设置到期时间expries
有效时长：
默认关闭浏览器就清除
使用expires = 国际标准时间戳，来规定到期时间
日期对象.toUTCString() ====当前时间换成UTC时间
流程：先获取当前日期对象 --->转换成毫秒娄 --->加上你规定的到期时长对应的毫秒数
var date = new Date(new Date().getTime() + 10*365*24*60*60*1000).toUTCString();
document.cookie = 'jmens = 6666; expires='+ date;
console.log( document.cookie )
图片.png
案例
<body>
<p id="lastTime"></p>
<p id="nowTime"></p>
<script>
//获取一下现在的时间并格式化
var lastTime = document.getElementById( 'lastTime' ),
nowTime = document.getElementById( 'nowTime' ),
date = new Date(),
YY = date.getFullYear(),
MM = date.getMonth()+1,
DD = date.getDate(),
HH = addZero( date.getHours() ),
mm = addZero( date.getMinutes() ),
ss = addZero( date.getSeconds() ),
time = YY + '-' + MM + '-' + DD + ' ' + HH + ':' + mm + ':' + ss;
var reg = /\blastTime=([^;]+)(;|$)/, //[^;]这里匹配除了;以外的其他字符 ([^;]+)把它变成子集方便等会取值 (;|$) 前面匹配完后下面是以;或者 前面部分某个符合匹配结束
last = document.cookie.match(reg);
if( last ){//有值的时候 有访问过
//更新一下上次访问的时间
document.cookie = 'lastTime='+last+';expires='+ new Date(date.getTime()+10*24*60*60*1000).toUTCString();
lastTime.innerHTML = '您上次访问的时间是' + last[1]; //取到第一个子集 ([^;]+) 匹配到单单时间的部分
} else {
//没有值的时候 没有访问过
lastTime.innerHTML = '欢迎您第一次来到本站！！';
}
//初始访问时给lastTime设置时间
document.cookie = 'lastTime='+ time +';expires='+ new Date(date.getTime()+10*24*60*60*1000).toUTCString();
nowTime.innerHTML = '您本次访问本站的时间是：' + time;
function addZero( n ) {
return n<10 ? '0'+ n : n+'';
}
</script>
</body>
Animation.gif
cookie封装
setCookie({
ali : 9999
},10)
removeCookie( 'ali' )
//设置cookie
function setCookie( json , time ){
for( var key in json ){
document.cookie = key + '=' + json[key]+';expires='+new Date(Date.now()+time*365*24*60*60*1000).toUTCString();
}
}
//获取cookie
function getCookie( attr ) {
var attr = '\\b'+attr+'=([^;]+)(;|$)', //这里\\b 如果在字符串里单单 \b 有特殊意义 所以要\\b转义一下
reg = new RegExp( attr ),
arr = document.cookie.match(reg);
return arr[1] ? arr[1] : ''; //判断一下有没有值 如果没有return '' 如果有值arr[1]
}
//删除cookie 思路就是把到期时间设为过去时间 会就自动删除
function removeCookie( attr ) {
var json = {}; //我们要把到期时间设为过去 就要用到设置cookie 参数要用json 所以我们定义一下json来接收
json[attr] = '';//这里要把我们传的attr变成json里面的属性 我们只要设置时间 json的值可以随便
setCookie( json , -999 )
}
