实用主义:前端cookie介绍及操作封装
前言
前端开发中,少不了对cookie进行操作,那么cookie究竟是什么东西呢?
Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。定义于 RFC2109 和 2965 中的都已废弃,最新取代的规范是 RFC6265[1]
。(可以叫做浏览器缓存) ——百度百科
说白了cookie就是用来存储数据的,并且cookie可以通过HTTP请求进行同域传播(CORS跨域请求默认是不带的)。由于HTTP是无状态协议,cookie也同时用作验证用户信息的凭证。
在WEB的蛮荒纪元中,没有localstorage、sessionstorage,因此cookie常常携带了许多额外的信息,但是浏览器对于每个域的cookie是有数量限制的。直到HTML5的出现,cookie才真正行使的是自己真正的职责——验证。
浏览器中的cookie
document.cookie
浏览器window并没有封装对于cookie的操作,只有唯一的一个document.cookie可以查看(不能查看http-only属性的cookie)
通过document.cookie我们可以看到cookie
"bdshare_firstime=1479130453985; CNZZDATA5578006=cnzz_eid%3D146565046-1476099110-null%26ntime%3D1488271921; Hm_lvt_8e2a116daf0104a78d601f40a45c75b4=1487416700,1487860599,1488207009,1488277146; Hm_lpvt_8e2a116daf0104a78d601f40a45c75b4=1488277146"
这是从runnoob上抓到的cookie。
我们可以看到通过document.cookie
得到的是一个字符串,cookie以name=value;
的形式进行划分
cookie的属性
这仅仅是包含cookies的字符串,但是cookie还有许多额外的属性,我们可以通过开发者工具台看到
cookie属性- Name:cookie的名字
- Value:cookie的值
- Domain:cookie所在的域
- Path:所在的路径
- Expires/Max-age:cookie的有效期,默认为0,只在session期有效
- Size:cookie的大小
- HTTP:http-only属性,是否只读,默认false
- Secure:是否只在https协议中传输,默认false
这里就不展开细致讲解属性了,具体请百度
前端封装cookie操作
浏览器只提供了doucment.cookie
属性,如果需要操作,我们需要手动封装操作方法
添加cookie 值为中文需要转码 重复名称会覆盖
function setCookie(name, val, day) {
let expireDate = new Date();
expireDate.setDate(expireDate.getDate() + day);
document.cookie = `${name}=${val};expires=${expireDate.toGMTString()}`;
}
通常我们只需要名称、值和生命期,更多的属性设置修改按照prop=val;
的形式修改最后一条代码即可。
读取cookie 返回一个包含cookie键值对的数组
function getCookies() {
let cookies = [];
if(document.cookie) {
let cookieArr = document.cookie.split(';');
for (let i = 0;i<cookieArr.length;i++) {
let keyArr = cookieArr[i].split("=");
let name = keyArr[0];
let val = keyArr[1];
cookies.push({name: val});
}
} else {
return false;
}
return cookies;
}
删除cookie 把失效日期设置为过期
function removeCookie(name) {
let cookies = getCookies();
if (cookies) {
for(let cookie of cookies) {
if(cookie.name === name) {
setCookie(name, null, -99);
break;
}
}
} else {
return false;
}
}
封装为一个单例
通常我们不会允许这些方法称为全局对象,因此需要封装为一个单例CookieManager
let CookieManager = {
setCookie,
getCookies,
removeCookie
};
最后
这是前端操作cookie的方法,后端因为语言众多,因此有各自的方法,通常是设置响应头。
就是这样:)