Cookie的封装以及注意事项

Cookie的封装

1. Cookie 是浏览器存储数据的一种方式，存储在用户本地，而不是存储在服务器上，是本地存储

2.作用场景

　　网站的中英切换

　　利用Cookie跟踪统计用户访问该网站的习惯，可以作为了解用户行为的一种工具，以便给用户提供更人性化的使用体验

3.设置Cookie

　　不能一起设置，只能单独设置

4.读取Cookie

　　读取的是一个由名值对构成的字符串，每个名值对之间由“ ，”（一个分号和跟一个空格）隔开

 5.Cookie的名称（Name）和值（Value）

　　创建Cookie时必须填写，其他属性可以使用默认值

class Cookie {
            // 参数解释：
            // key:名字
            // val：名字对应的值
            // exp：保存时间
            // 设置cookie
            static setCookie(key,val,exp=""){
                if (exp) {
                    let date=new Date();
                    date.setTime(date-0+exp*60*1000);
                    exp=date.toGMTString();
                    exp=';expires='+exp;
                }
                // 设置
                document.cookie=key+"="+val+exp;
            }
            // 获取cookie
            static getCookie(key){
                let cook=document.cookie;
                //1.判断是否有值
                if (cook) {
                // 2 将字符串分割为数组
                cook=cook.split(";");
                // 3 根据key,找到则 返回目标元素
                let arr=cook.filter((v) => {
                    return v.indexOf(key) !=-1;
                });
                // arr 为空则返回空
                return arr[0]?arr[0].split("=")[1]:null;
                }
            }
            
        }
        Cookie.setCookie("name","张三")
        console.log(Cookie.getCookie("name"));

Cookie的注意事项

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

2.Cookie有数量限制

　　每一个域名下的Cookie数量有限（不同浏览器限制不同）

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

3.Cookie有大小限制

　　每个Cookie的存储容量很小，最多只有4KB左右（每个浏览器容量不同）