初始Cookie|基本用法|三种属性|两种封装|注意事项

Cookie是什么以及他的作用

　　Cookie，有时也用其复数形式 Cookies。

　　类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密）

　　　　由用户客户端计算机暂时或永久保存的信息

　　　　Cookie全称HTTPCookie,简称Cookie

　　是浏览器存储数据的一种方式

　　因为存储在用户本地,而不是存储在服务器上,是本地存储

　　一般会自动随着浏览器每次请求发送到服务器端

　作用：利用 Cookie跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在毎个网页的停留时间等

　　不要再Cookie中保存密码等敏感信息

Cookie的属性：

1Cookie的名称（naem）和值（Value）：

　　　　最重要的两个属性，创建Cookie时必须填写，其他属性可以使用默认值

　　Cookie的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent（）编码，读取时使用

　　decodeURIComponent（）解码

 

document.cookie = 'username = alex'；
document.cookie = 'username = 张三'；

　　　一般名称使用英文字母，不要使用中午文，值可以使用中文，但是要编码

2.失效时间（到期）时间

　　对于失效的Cookie会被浏览器清楚

　　如果没有设置失效，（到期）时间这样的Cookie成为会话Cookie

　　它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失

　　document.Cookie= 'username=alex';

　　想长时间存在，设置Expires或Max-Age

　　值为Data

　　document.cookie = 'username = alex ; expires = ${new Data'('2024-1-1 00:00:00')};

　　max-age

　　值为数字，当前时间+多少秒后过期，单位是秒

　　document.cookie = ’usernaem = alex ； max-age=5‘；

　　document.cookie = ’usernaem = alex ； max-age=${24*3600*30}‘；

　　如果 max-age 的是0或负数，则Cookie会被删除

　　document.cookie =’username = alex ；max - age=0‘;

　　document.cookie =’username = alex ；max - age=-1‘;

Domain域

　　Domain限定访问Cookei的范围

　　使用JS只能读写当前父域的Cookie，无法读取其他域的Cookie

　　document.cookie = ’username = alex ; domain = www.imooc.com‘;

path路径

Path限定了访问Cookie的范围（同一个域名下）

　　使用js只能读写当前路径和上级的Cookie无法读写下级的路径的Cookie、

　　当 Name　　Domain　　Path 这三个字段都相同的时候才是同一个Cookie

HttpOnly

　　设置HttpOnly属性得Cookie不能通过js去访问

Secure安全标志

Secure限定了只有在使用了http而不是http得情况下才可以发送给服务端

 

 

<script type="module">
    import {set} from'./cookie.js';
    set('username','alex');
    set('username','zs');
    set('age','18');
    set('用户名','张三');

    set('sex','male',{
        maxAge:30*24*3600,
    });
    remove('username');
    remove('用户名');
    console.log(get('username'));
    console.log(get('age'));
    console.log(get('用户名'));
    console.log(get('sex'));
</script>


const set = (name,value,{maxAge,domain,path,secure}= {}) => {
let cookieText = `${encudeURIComponent(naem)}=${encdeURICompnet(value)}`;
if (typeof maxAge === `number`){
    cookieText +=`;max-age=${maxAge}`;
}
if (domain){
    cookieText+=`;domain=${domain}`;
}

if (path){
    cookieText+=`;path=${path}`;
}
if (secure){
    cookieText+=`;secure`;
}

}

Cookie的注意事项

前后端都可以写入和获取Cookie

　　Cookie是有数量限制的

　　　　每个域名下的Cookie数量限制

　　Cookie有大小限制

　　　　每个Cookie的容量储存很小最多只有4KB左右

　　当超过单个域名之后，再设置Cookie，浏览器就会清除以前设置的Cookie