Cookie是客户端存在本地的一个数据,简单来说就是本地缓存。
Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段,但现在随着现代浏览器开始支持各种各样的存储方式,Cookie渐渐被淘汰。
由于浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销,于是cookie成为了记录用户信息的专属,Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie有两个方式注入,一个是服务端直接写入,另外一个是JavaScript创建。JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
document.cookie通过分号;接收三个参数:
document.cookie="key=value; expires=time; path=/";
key和value就是要存储的键值对;
expires是存储时间,UTC和GMT时间都可以,如果没有这个值默认浏览器关闭就删除cookie;
path是路径,默认情况下是当前页面,如果你要某个子页面不希望其他子页面能获取就要设置这个path;
我们封装一个设置、删除、获取的方法:
var cookie = {
set: function (key, val, time) {
//设置cookie方法
var date = new Date();
var expiresDays = time;
date.setTime(date.getTime() + expiresDays * 24 * 3600 * 1000);
document.cookie = key + "=" + val + ";expires=" + date.toGMTString();
},
get: function (key) {
var getCookie = document.cookie.replace(/[ ]/g, "");
var arrCookie = getCookie.split(";")
var res;
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (key == arr[0]) {
res = arr[1];
break;
}
}
return res;
},
remove: function (key) {
var date = new Date();
var expiresDays = date.setTime(date.getTime());
document.cookie = key + "=;expires=" + date.toGMTString();
}
};
其实删除就是给设置一个过期时间。因为document.cookie获取到的cookie中间有空格,所以要正则去空格。
Cookie在JavaScript的操作很简单,不过我们要注意,不要随便设置cookie,因为cookie会被携带上发送到服务端,影响性能。所以客户端最好不要设置cookie,如果有需要的话让服务端自己注入cookie。
已更新到:https://www.npmjs.com/package/wade-tools
欢迎关注Coding个人笔记 公众号
网友评论