cookie的存取删和封装

cookie的概述

1.localStorage是html5新增。

• 本地储存使用的
• 永久储存
• 浏览器支持储存5M大小

2.cookie的概念：

• Cookie又叫会话跟踪技术是由web服务器保存再用户浏览器上的小文件本
• web服务器保存
• 关闭浏览器===会话结束

3.cookie的特点

• 禁用cookie,无法正常登录。
• cookie与浏览器相关,不同的浏览器之间的cookie不能互相访问。
• cookie可以被删除。
• cookie储存的也是字符串。
• cookie自由设置过期时间(储存多长时间)
• cook储存4K大小
• document.cookie(document来调用)

---

cookie的存储

1.储存cookie , docuement.cookie 一条条储存,键值对(key=value),如果key相同，覆盖

document.cookie = "name=zhangsan";
document.cookie = "age=100";
document.cookie = "sex=男";

2.存储带有过期时间的cookie

 let d = new Date();//获取当前的日期
 //alert(d.getDate());//4 获取当天是多少号
  d.setDate(d.getDate()+10);//获取当前的日期+10;在设置回去；
  document.cookie="name=zhangsan;expires="+d;//expires:设置过期日期;

3.储存cookie的函数封装

 	// encodeURIComponent();//对文本框输入的值进行编码，中文，特殊字符编码结果是%加上这些符号的ASCII码十六进制对照表。
  	// decodeURIComponent();//输入的值进行解码
    function addcookie(key, value, days) {
        let d = new Date();
        d.setDate(d.getDate() + days);
        document.cookie = `${key}=${encodeURIComponent(value)};expires=${d}`;
    }
    addcookie("name", "张三", 7);
    addcookie("age", "100", 7);
    addcookie("sex", "男", 7);

---

cookie的获取

1.获取cookie–document.cookie获取全部的cookie
目标：传入key，放回key对应的value

	alert(document.cookie);//name=%E5%BC%A0%E4%B8%89; sge=100; sex=%E7%94%B7;
    console.log(decodeURIComponent(document.cookie));//name=张三; sge=100; sex=男
    //获取的全部是cookie中间通过分号和空格连接起来的。("; ")
    console.log(decodeURIComponent(document.cookie).split("; "));//利用分号和空格进行拆分
    ["name=张三, sge=100, sex=男"];

2.通过封装函数来获取cookie中的某个值

function getcookie(key) {
        let cookiearr = decodeURIComponent(document.cookie).split('; ');
        //console.log(cookiearr);//["name=张三", "sge=100", "sex=男"]
        for (let i = 0; i < cookiearr.length; i++) {
            let newarr = cookiearr[i].split('=');
            if (key === newarr[0]) {
                return newarr[1];
            }
        }
    }
    console.log(getcookie("name"));//张三
    console.log(getcookie("age"));//100
    console.log(getcookie("sex"));//男

---

cookie的删除

• 删除cooki-将cookie的过期时间设为一个已经过去的时间。
• 思路：添加cookie的时候key的值相同，会覆盖;
• addcookie(“name”,"",-1);addcookie(“name”,"",-1);

封装

function delcookie(key){
    addcookie(key,"",-1);
}
 delcookie("name");//删除为name的cookie数据；

---

综合封装

let jscookie = {
    add: function (key, value, days) {
        let d = new Date();
        d.setDate(d.getDate() + days);
        document.cookie = `${key}=${encodeURIComponent(value)};expires=${d}`;
    }
    ,
    get: function (key) {
        let cookiearr = decodeURIComponent(document.cookie).split('; ');
        //console.log(cookiearr);//["name=张三", "sge=100", "sex=男"]
        for (let i = 0; i < cookiearr.length; i++) {
            let newarr = cookiearr[i].split('=');
            if (key === newarr[0]) {
                return newarr[1];
            }
        }
    }
    ,
    del: function (key) {
       jscookie.add(key, '', -1);
    }
}
jscookie.del("age");//删除名为age的cookie数据；