[网络协议]cookie特点属性设置方法及其封装

cookie特点

• cookie不可跨域
• cookie存储在浏览器中
• cookie存在数量以及大小限制(50个左右,4KB左右)
• cookie的存储时间非常灵活
• cookie不光服务端可以设置,客户端也可以设置

cookie的属性

• name: cookie的名字,具有唯一性(重复定义同一个名字会覆盖)
• value: cookie的值
• domain: cookie生效的域
• path: cookie的路径
• expires: cookie过期的时间(接受GMT格式的时间,new Date(),不设置时默认浏览器关闭时该cookie时效)
• max-age: cookie有效期(值为秒,意味着该条cookie还能存活几秒)

expires与max-age二选一即可,都不设置时默认浏览器关闭时该cookie失效

• HttpOnly: 存在此标记,前端无法获取该条cookie(前端无法设置该值)
• Secure: 该cookie只能通过https协议传输(前端无法设置该值)
• SameSite: 设置cookie在跨域请求时不能被发送(前端无法设置该值)

前端cookie设置方法

document.cookie = "username=zhangsan"; //设置username为张三的cookie
//cookie只能一次设置一条,不能一次设置两条
document.cookie = "a=1; b=2"; //b=2不会被设置
//设置其他属性
document.cookie = "username=zhangsan; domain=127.0.0.1; path=/";
document.cookie = "color=red; expires=" + new Date(2100,0,1); //2100年1月1日
document.cookie = "age=18; max-age=50"; //50秒之后该条cookie被删除

cookie的封装使用

let cookieControl = {
    /* 
     * 设置cookie
     * @name(String)     cookie的属性名
     * @value(String)    该属性的值
     * @second(Number)   该cookie存储的秒数(s)
     */
    set: function (name, value, second) {
        document.cookie = name + "=" + value + "; max-age=" + second;
    },
    /* 
     * 删除cookie
     * @name(String)     cookie的属性名
     */
    remove: function (name) {
        this.set(name, "", 0); //设置cookie保存时长为0秒即可删除该条cookie
    },
    /* 
     * 获取cookie
     * @name(String)    cookie的属性名
     * return (String)  返回属性值
     */
    get: function (name) {
    	//document.cookie原型: "name=value; name2=value2"
        let cookieArray = document.cookie.split("; "); 
        //cookieArray: ["name=value", "name2="value2"]
        for (let index = 0; index < cookieArray.length; index++) {
            const element = cookieArray[index].split("=");
            //index == 0  ---->  element: ["name", "value"]
            //index == 1  ---->  element: ["name2", "value2"]
            if (element[0] == name) {
                return element[1];
            }
        }
    }
}
cookieControl.set("top", "123", 3600);
// cookieControl.remove("top");
console.log(cookieControl.get("top"),'cookieControl.get("top")');