Cookie
定义
Cookie是一段不超过4KB的小型文本数据,由一个名称(Name)、一个值(Value)和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成
使用
1、设置cookie
Name/Value:设置Cookie的名称及相对应的值
docment.cookie = 'name=张三'
2、path属性:定义了Web站点上可以访问该Cookie的目录
document.cookie = 'user=小明; path=/server';
指定具体的路径 意味着该cookie只能在指定的路径下被访问
3、Expires属性:设置Cookie的生存期。
有两种存储类型的Cookie:会话性与持久性。
Expires属性缺省时,为会话性Cookie,仅保存在客户端内存中,并在用户关闭浏览器时失效;
持久性Cookie会保存在用户的硬盘中,直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效
// 获取时间对象
let d = new Date();
// 设置七天的有效期
d.setTime(d.getTime()+7*24*3600*1000)
document.cookie = 'wan=js万物皆对象; expires=' + d.toUTCString();
4、Domain属性:指定了可以访问该 Cookie 的 Web 站点或域
Cookie 机制并未遵循严格的同源策略,允许一个子域可以设置或获取其父域的 Cookie。
document.cookie = 'user=李白; domain=.a.com';
5、Secure属性:指定是否使用HTTPS安全协议发送Cookie
使用HTTPS安全协议,可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。
该方法也可用于Web站点的身份鉴别,即在HTTPS的连接建立阶段,浏览器会检查Web网站的SSL证书的有效性。
6、HTTPOnly 属性 :用于防止客户端脚本通过document.cookie属性访问Cookie
有助于保护Cookie不被跨站脚本攻击窃取或篡改。
但是,HTTPOnly的应用仍存在局限性,一些浏览器可以阻止客户端脚本对Cookie的读操作,但允许写操作;
此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头
💡注意: 一个网站支持多个Cookie的使用,每个Cookie的键名可以不同,每个键名可以存储的东西都可以不一样。如果键名一样,那么后一个键名的值会覆盖前一个键名的值。
cookie技术的局限性
-
多人共用一台计算机,Cookie 数据容易泄露。
-
一个站点存储的 Cookie 信息有限。
-
有些浏览器不支持 Cookie。
-
用户可以通过设置浏览器选项来禁用 Cookie。
cookie的应用场景
Cookie 可以用来存储用户名、密码、访问该站点的次数等信息
例如:后台登录页有一个记住用户名或者记住密码的选项,当我们打钩登录成功后,下次再进到登录页时会发现账号和密码都保存有。这种场景用的就是Cookie存储
cookie的封装
var cookie={
getAll:function(){
var arr=document.cookie.split('; ');
var obj={};
for(var i=0;i<arr.length;i++){
obj[arr[i].split('=')[0]]=arr[i].split('=')[1];
}
return obj;
},
get:function(key){
return this.getAll()[key];
},
set:function(key,value,time){
var date=new Date().getTime()+time*1000;
document.cookie=key+'='+value+';expires='+new Date(date).toUTCString();
},
remove:function(key){
var date=new Date().getTime()-1;
document.cookie=key+'=;expires='+new Date(date).toUTCString();
}
};
cookie.getAll();//获取所有的cookie
cookie.get('name');//获取'name'cookie
cookie.set('abc',123);//新建一个cookie
cookie.set('abc',123,5);//新建一个5秒后删除的cookie
cookie.remove('abc');//删除一个cookie