cookies、sessionStorage和localstorage

缓存

cookie 缓存页面信息到浏览器

存储的数据量比较小，浏览器数据存储，下次读取，有效期

    //创建cookie
    document.cookie="cookieName";
    expires  //有效期
    path  //当前cookie的 有效路径  不写默认有效路径
//设置cookie 
document.cookie = "username=cookieName;expires=Wed, 18 Mar 2020 07:50:41 GMT;";
//读取cookie
var cookie = document.cookie.split(";");
var username = cookie[0].split("=")[1];
var expires = cookie[1].split("=")[1];
//删除cookie  只要修改当前cookie的 有效期就可以

localStorage 本地缓存

永久存储，除非删除

	//设置缓存  键和值
localStorage.setItem("key1", "value1");
localStorage.setItem(time.getTime(),JSON.stringify(data)); 
    //读取缓存 根据键
localStorage.getItem("key1"));
    //删除缓存 
localStorage.clear();  //全部清除
    //移除缓存 根据键 
localStorage.removeItem("key1");

    //读取session  集合 sessionStorage
localStorage.key(0);//根据存储的索引 返回 对应的键

sessionStorage 临时缓存

浏览器客户端缓存 客户端关闭（当前窗口关闭）之后 就会自动删除 （临时存储）

	//设置缓存  键和值
sessionStorage.setItem("key1", "value1");
sessionStorage.setItem(time.getTime(),JSON.stringify(data)); 
    //读取缓存 根据键
sessionStorage.getItem("key1"));
    //删除缓存 
sessionStorage.clear();  //全部清除
    //移除缓存 根据键 
sessionStorage.removeItem("key1");

    //读取session  集合 sessionStorage
sessionStorage.key(0);//根据存储的索引 返回 对应的键

不同点

1. 存储大小
   cookie数据大小不能超过4k
   sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2. 有效时间
   localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
   sessionStorage 数据在当前浏览器窗口关闭后自动删除
   cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式
   cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
   sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

字符串 加密转码

//加密
var mistr = window.btoa("str");
//解密
var str = window.atob(mistr);

//转码
escape("张三");  //%u5F20%u4E09
//解码
unescape("%u5F20%u4E09"));//张三