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技术的局限性

  1. 多人共用一台计算机,Cookie 数据容易泄露。

  2. 一个站点存储的 Cookie 信息有限。

  3. 有些浏览器不支持 Cookie。

  4. 用户可以通过设置浏览器选项来禁用 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
posted @ 2022-05-31 19:13  秋弦  阅读(91)  评论(0编辑  收藏  举报