浏览器中的本地存储

一、cookie

特点
1、只能存文本(字符)，
2、存储数量在50字符左右
4、大小4k左右，
5、默认会话级(关闭浏览器就删除)，但也可以指定，自动跟随http协议发往 服务器。
6、不允许跨域（同源：同协议，同域名，同端口），不允许跨路径；

1、cookie使用方式

cookie的使用：document.cookie = “名字=值；配置名=配置值…”
查看存储的cookie需要在启动服务器后在当前设置的页面下查看

设置单个值   
	document.cookie = "name = 陈晨";

设置值及路径 
	document.cookie = "h=80;path = /www";

存储值+路径+存储有效期     
 const d = new Date();  //获取时间
       d.setDate(d.getDate()+3);  //在当前日期往后推三天后删除cookie
 document.cookie = "h=80;path=/www;expires="+d;  //设置cookie

删除cookie：让cookie过期
const d = new Date();
      d.setDate(d.getDate()-1);
document.cookie = "h=50;path=/www;expires="+d;

2、cookie对应操作的封装

// 查询cookie，根据名字返回值
function getCookie(key){
    const arr = document.cookie.split("; ");
    let str = "";
    const flag = arr.some(val=>{
        const a = val.split("=");
        str = a[1];
        return a[0] === key;
    })
    return flag ? str : "";
}

// 设置cookie的封装，调用函数并输入名值，配置名配置值的对象
function setCookie(key, val, ops={}){
    let time = "";
    if(ops.expires){
        const d = new Date();
        d.setDate(d.getDate() + ops.expires);
        time = `;expires=${d}`;
    }
    let path = ops.path ? `;path=${ops.path}` : "";
    document.cookie = `${key}=${val}${path}${time }`;
}

// 删除cookie，输入对应的名字及配置名和值删除对应cookie
function removeCookie(key, ops={}){
        ops.expires = -1;   // 指定有效期为负
        setCookie(key, "", ops); // 利用设置cookie方法
    }

二、localStorage 和 sessionStorage

特点
1、不会随着http协议发往服务器，真正的纯粹的本地存储；
2、大小：5M左右；
3、时效性：sessionStorage只能会话级， localStorage只能永久级

1、使用方式

两者使用方法相同

增：localStorage.setItem("name","陈晨");
改：改就是换重复增加换不同的值即可

删：localStorage.removeItem("name") 或↓↓↓都可删除
    localStorage.removeItem("name","陈晨");

查：localStorage.removeItem("name")

清除所有记录(慎用)：localStorage.clear()