cookie

wade

发布于 2020-04-24 17:19:39

8050

发布于 2020-04-24 17:19:39

文章被收录于专栏：coding个人笔记 coding个人笔记coding个人笔记

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2018-11-28，如有侵权请联系 cloudcommunity@tencent.com 删除

存储