JS22---js缓存 cookie Storage

一. cookie 缓存用户信息

① cooki是一些数据，存储于你电脑上的文本文件中。
② 在检查里边的Application Storage 中可以查看cookie
③ 理解：当用户访问web页面时，注册页面输入的名字可以记录在cookie中。
在用户下一次访问改页面时，可以在cookie中读取用户访问记录。
微信聊天的语音，聊天记录什么的都在缓存，
缓存在本地服务器上（手机：代理服务器，手机缓存基本上用storage写的）
④ cookie的有效期expires：该数据在电脑上保存多久。
⑤ path参数为cookie的路径
⑥ js中读取cookie：document.cookie 以字符串形式返回所有的cookie
⑦cookie 大小 2kb 特别小 在网站用的比较多，移动端用的都是h5缓存

document.cookie可以读取也可以设置

下图是官方的的cookie解释

path=/ 仅限于当前项目访问

        var time=new Date("2019 10-01 12:00:00");
        console.log(time);             // Tue Oct 01 2019 12:00:00 GMT+0800
    
     	Tue Oct 01 2019 12:00:00 GMT+0800       有效期，到这个时间，信息自动清除
     	 //这种写法错误，不可以直接写time, time是一个变量,字符串里边不能写变量
       	 // document.cookie="user=123;expires=time;"; 
      	 document.cookie="user=123;expires=Tue Oct 01 2019 12:00:00 GMT+0800;"; 
      	
        document.cookie="user=123;expires=Tue Oct 01 2019 12:00:00 GMT+0800;path=/";
        document.cookie="id=123;expires=Tue Oct 01 2019 12:00:00 GMT+0800;path=/";
       
      	console.log(document.cookie);       //是完整的一串字符串  user=123; id=123
        console.log(document.cookie.split(";")[0]);  //user=123 去除引号
        console.log(document.cookie.split(";")[0].split("=")[0]);   //user 再去除等号
        //转化为json格式
        var jsonlist={};
        var data=document.cookie.split(";")[0].split("=");
        jsonlist[data[0]]=data[1];  //自定义元素赋值
        //只转了一个，要转好多变成变量值
        console.log(jsonlist);      //Object {user: "123"}

所谓同源是指，域名，协议，端口相同。
Cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。 Cookie还需要指定作用域，不可以跨域调用

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生；

二. html5缓存

h5缓存只有key和value，没有有效期那些其他东西
localStorage 和 sessionStorage 用法是一样的

storage分为

localStorage 硬盘缓存 （本地缓存 类似cookie 浏览器关闭后缓存还在）

sessionStorage 浏览器缓存（浏览器关闭后缓存就没有了）

storage存储的是字符串，如果将JSON存入，与读取，需要用到：

1.JSON.stringify(data) 将对象转换成JSON格式的数据串。

2.JSON.parse(data) 将数据解析成对象并返回解析后的对象。

setItem() 设置
getItem() 读取
clear() 清除所有的
removeItem() 移除特定的
key() 取特定的索引所对应的键

1.localStorage

localStorage.setItem("user","12345");//第二个参数要求字符串
localStorage.setItem("id","333");
   
console.log(localStorage.getItem("user"));//根据键来读取，读取的是键值
console.log(localStorage.length);  //length缓存的长度（存了多少条数据）
console.log(localStorage.key(0));  //通过索引获取对应条数的键
//localStorage.clear();            //清除缓存
localStorage.removeItem("id");    //清除某一个键

2.sessionStorage

sessionStorage.setItem("user","12345");
sessionStorage.setItem("id","333");

console.log(sessionStorage.getItem("user"));
console.log(sessionStorage.length);  
console.log(sessionStorage.key(0));  
//localStorage.clear();  
sessionStorage.removeItem("id");  

session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群，数据库文件中
cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现session的一种方式。单个cookie保存不能超过4k，很多浏览器都限制了一个站点最多保存20个cookie，session的运行依赖于session id，而session id是存在cookie中的。