不吐槽,上来就搞。希望坚持下去吧,先定一个小目标:一周写一篇。
Cookie 是什么?
按个人理解,Cookie就是一个比较安全的数据存储仓库。说仓库可能有点不太合适,因为它的容量比较小,浏览器对它的数量作了限制(不同浏览器限制的数量不同,有20个、30个、50个等等)。Cookie 一般是由服务器端生成并保存到浏览器中。
Cookie 家族成员
- Name
必项。用来设置 Cookie 的名称。
- Value
选填。名称对应的值。
- Domain
选填。Cookie 所在的域名,默认写入当前域名。
- Path
选填。该 Cookie 作用的路径。
- Expires/Max-Age
选填。Cookie 的失效/删除时间,默认关闭浏览器页面时该 Cookie 失效/删除。
其中,Expires 的格式为 GMT ( 如:"Wed, 07 Nov 2018 07:12:39 GMT" )。它指定的是页面最后访问的时间,即绝对过期时间,是一个固定值。如果客户端和服务端 Expires 设定的不一致,会存在偏差(未验证)。
而 Max-Age 是页面访问后的存活时间,并不是固定值。它告诉浏览器此 Cookie 还有多久过期。它的单位是秒。
Max-Age 的优先级比 Expires 高。
- Size
表示此条 Cookie 的大小,无法修改。
- HTTP
服务端设定。如果将该属性设为true,那么前端通过js将会获取不到cookie信息,这样能有效的防止XSS攻击。(网上找的说明,未验证)。
- Secure
服务器端设定。如果将其设为true,cookie只能用https协议发送给服务器端,不能通过http协议发送。 https 中的 s 不就是 secure的意思吗?不知道有没有这个说法。[滑稽]
- SameSite
这个属性个人不是很明白,网上查了下,好像是防止 CSRF 攻击的,如果有兴趣的可以自己去了解一下。
加个下划线,毕竟上面的都是理论,下面的才是实践?。要不要一起敲敲看?
Cookie 的读/写/删除
读
// js 原生提供的方法,输出的是当前域名下的所有 Cookie,以 ';' 分隔。
document.cookie
复制代码
如果想获取某一个 Cookie 的值,那通过分隔符 ';' 这个特点,完全可以封装一个方法。
// 获取某个 Cookie 的值
function getCookie(name) {
var arrCookies = document.cookie.split(';');
for(var i=0; i<arrCookies.length; i++) {
var newN = arrCookies[i].trim().split('=');
if(newN[0] == name) {
return newN[1];
}else {
alert('该 Cookie 不存在');
}
}
}
复制代码
写
Cookie 的写入和读取都是通过 document.getCookie
// 举个栗子
document.cookie = 'Gaara=Partiny;';
复制代码
我们可以通过相同的方法,来为 Cookie 设置其他属性,属性之间用 ';' 分隔。
// 获取当前的时间戳
var ct = Date.parse(new Date());
// 获取当前时间,并在此基础上加30分钟
var dt = new Date(ct + 30*60*1000);
// 时间戳转为 GMT 格式
dt.toGMTString();
// 写入 Cookie,并设置 Expires
document.cookie = 'Gaara01=Partiny01;Expires='+dt;
复制代码
删除
Cookie 的删除和写入想法,写入是赋值,而删除就是赋空值,并将时间置为失效。
document.cookie = 'Gaara01=;Expires=Thu, 01 Jan 1970 00:00:00 GMT';
复制代码
如果要删除所有的 Cookie,与获取类似,也可以封装一个方法自己用。
不过我自己测试了一下,发现清除的都是通过 document.cookie 写进去的域名,原有的并没有清除掉,具体原理不太清楚。
// 清除所有 Cookie。 个人封装的,可能会有纰漏,望指正
function clearAllCookie() {
var arrCookies = document.cookie.split(";");
for (var i = 0; i < arrCookies.length; i++) {
var c = arrCookies[i].trim();
var isEqual = c.indexOf("=");
var name = isEqual > -1 ? c.substr(0, isEqual) : c;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
}
}
复制代码
总结一下
因为平时工作接触的 Cookie 不多,所以以上的内容可能在大佬看来比较浅显,甚至会有错误,望指正,多谢。