cookie和本地存储

Cookie（会话跟踪技术）

是存储在浏览器中的缓存信息，Cookie是开发人员如今可以使用的最古老、最稳定的客户端存储形式，由W3C组织提出最早由Netscape社区发展的一种机制，由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。

Cookie特性

• 可以跨域同域名下的多个网页，但不能跨域多个域名使用
• 存储空间限制允许4kb
• 默认情况下，浏览器没有限制可以拥有的Cookie数量（不同浏览器会有不同）
• 可以设置cookie过期时间

Cookie作用

实现客户端与服务器之间状态的保持

• 登录记录
• 多个页面的数据传递
• 保存用户信息

Cookie查看

document.cookie //返回cookie信息
也可以在Application -> storage -> Cookies

Cookie使用方法

key=value键值对;

document.cookie = "name=mingxin"; //会在原有的cookie后面追加而不会被覆盖
document.cookie= "name=mingxin,age=18";//设置多个cookie使用 ;隔开

默认cookie的结束时间是关闭浏览器的时候

cookie不能识别中文需要转码

encodeURICompoent( string ) 将中文编译成对应的字符

decodeURICompoent（ encodeURICompoent( string ) ） 将对应的字符转为中文

设置cookie常用属性

属性	描述
name	该Cookie的名称。Cookie一旦创建，名称便不可更改
value	该Cookie的值。如果值为Unicode字符，需要为字符编码。
expires	设置cookie的过期时间使用expires(确定的时间)
maxAge	max-age用秒来设置cookie的生存期(5*24*60*60)
path	允许Cookie的使用路径
domain	可以访问该Cookie的域名。
secure	该Cookie是否仅被使用安全协议传输。安全协议。默认为false<br />如果不设置字段 cookie 可以通过http,https 协议加载设置<br />如果设置这个字段, 那么只能通过https协议才能设置成
HTTP-Only	HTTP-Only 背后的意思是告之浏览器该 cookie 绝不能通过 JavaScript 的 document.cookie属性访问

设置单个Cookie过期时间

以天为过期时间单位设置cookie

setDate() 设置一个月的某一天

getDate() 返回当前多少号（1~31）

toGMTString() 把 Date 对象转换为字符串

getTime() 返回1970/1/1至今的毫秒数

1000 * 60 * 60 * 24*day //得到天的毫秒数

• 方法一

  function setCookie(name,value,day){ 
      let date = new Date(); 
      data.setDate(date.getData()+day); //Mon Dec 14 2020 16:50:34 GMT+0800 (中国标准时间)
      //let expires= date.toGMTString(); //Mon, 14 Dec 2020 08:50:34 GMT
    let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
      if(reg.test(value)) encodeURIComponent(valu);
      document.cookie = `${name}=${value},expires=${date}`;
  }
  setCookie("name","mingxin",1)
  

• 方法二

  function setCookie(name,value,day){
      let date = new Date().getTime();
      let ms = day * 24 * 60 * 60 * 1000;
      let newTime = date + ms;
      let newDate = new Date(newTime);
      document.cookie=`${name}=${value};expires=${newDate}`;
  }
  setCookie("name","value",2)
  

• 简化方法

  function setCookie(obj){
      let date = new Date().getTime() + obj.day*24*60*60*1000;
      let newDate = new Date(date);
      document.cookie=`${obj.prop}=${obj.value};expires=${newDate};`
  }
  setCookie({ prop:"username",
            value:"mingxin",
            day:1})
  

• 添加可选参数

  function setCookie(name,value,{expires,path,domain}={}){
      let cookieStr=encodeURIComponent(name)+"="+encodeURIComponent(value);
      if(expires){
          cookieStr += ";expires=" + expiresDate(expires);
      }
      if(path){
          cookieStr += ";path=" + path;
      }
  }
  //过期时间函数
  function expiresDate(day){
      let newDate = new Date(new Date().getTime() + day*24*60*60*1000);
      return newDate
  };
  //
  setCookie("username","pwd123456",{expires:1,......})
  

设置的过期时间不能小于当前时间 否则cookie会理解被清除

设置多个cookie

function setCookie(data){
    data.forEach((item,index)=>{
        var date = new Date(new Date().getTime() + item.time*24*60*60*1000);
        document.cookie = `${item.name }=${item.value};expires=${date}`;
    })
}
setCookie([
    {
        name:'w',
        value:18,
        time:1
    },{
        name:'h',
        value:19,
        time:2
    },{
        name:'d',
        value:20,
        time:3
    }
])

获取cookie

function getCookie(){
    let cookies= document.cookie; 
    let cookiesArr=cookies.split(";")
}               

二.WEB存储

本地存储
优点	离线应用程序<br />直接访问数据<br />节省网络流量<br />服务器获取数据
缺点	没有任何同步支持<br />存储限制模糊

Storage:

是HTML5中新增的特性用来解决cookie存储空间不足的问题，Cookie存储的进化版，存储的值限定字符串需要通过JSON对象去转换，存储内容多的话会消化内容空间， IE8以下不兼容；

分为两个：

本地存储（localStorage）:

1.特点域内安全

2.数据多页面共享、

3.存储量限制5M-10M

4.会持久存在（除非被用户清除）

会话存储（sessionStorage) ：

1.临时会话，刷新不会消失，只要浏览器关闭就会消失

2.数据不能共享

API口诀："两个接口，四个函数“

两个接口：sessionStorage localStorage

四个函数：setItem getItem removeItem clear

设置setItem()(键名，键值)：

（key,value)类型都是字符串

localStorage.setItem("name","mingxin"); //内置对象  
//设置中文转码encodeURIComponent("名");

获取getItem():

读取已经存储在本地的数据，通过key作为参数夺取出对应key的数据

let data = localStorage.getItem("name");

移除removeItem():

移除已经存储在本地的数据，通过key作为参数删除对应key的数据

localStorage.removeItem("name");

移除本地所有数据getItem():

localStorage.clear();

传入一个对象

let obj = {
    name:"mingxin",
    age:18,
    random:Math.florr(Math.random()*50)
}
localStorage.setItem("name",JSON.stringify(obj))
//获取
JSON.parse(localStorage.getItem("name"));

存储事件

当数据有修改或删除的情况下，就会触发storage事件

<span style="color:red">在对数据进行改变的窗口对象上是不会触发的(旧页面和新页面)</span>

storage对象常用属性：

key	修改或删除的key值，如果调用clear(),key为null
oldValue	改变前的value值
newValue	新设置的值（改变后的值），如果调用removeStorage(),key为null
storageArea	当前的storage对象
url	触发该脚本变化的文档的url(旧页面的url) 注：session同窗口才可以,例子：iframe操作

npm 里有封装好的库

window.addEventListener('storage',function(ev){
    console.log(ev.key);
    console.log(ev.newValue  );
    console.log(ev.oldValue );
    console.log(ev.storageArea );
    console.log(ev.url);
})

兼容问题

在老版本浏览器上，通过使用Cookies来做替代方案并做好域内安全。

三.离线存储（offline application）

​ HTML5 中可以让我们构建一个离线缓存的应用,离线存储是一个基于manifest文件（缓存清单文件，后缀名为.appcache/.manifest）的缓存机制，通过这个文件上的清单解析离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态时，浏览器就会通过被离线存储的数据进行页面展示，可以让我们构建一个离线缓存的应用。 cache缓存 manifest显示

离线缓存的优势：

1.可以配置需要缓存的资源

2.网络无连接应用扔可用

3.本地读取缓存资源,可以提升访问速度, 增强用户体验

4.减少请求,缓解服务器负担

缓存清单

缓存清单就是一个普通的文件，其中列出浏览器应该缓存的资源，以供离线的时候访问，一般使用.appcache/.manifest为后缀名。

缓存的使用 注：需结合服务器使用（常用服务器：IIS nginx apache）

html标签里使用缓存清单

<html lang="en" manifest="XXXXXX.manifest"> 

<html lang="en" manifest="XXXXXX.appcache"> 

缓存清单格式

1. 顶行写 CACHE MANIFEST
2. CACHE: 指定我们需要缓存的静态资源, 入css, image, js等
3. NETWORK: (可选) 指定需要在线访问的资源, 可以使用通配符--无论缓存中是否存在，均从网络获取
4. FALLBACK: (可选) 当被缓存的文件找不到时的备用资源

CACHAE MANIFEST //顶行

CACHE： //需要缓存哪些资源
./image/one.jpg
./image/two.jpg
./image/three.jpg

NETWORK:  //指定需要在线访问的资源
*   //*代表所有没有确定缓存的资源都不进行缓存

FALLBACK:  //当被缓存的文件找不到时的备用资源
./image/four.jpg    ./image/five.jpg    //当four.jpg缓存资源丢失找不到-->启用备份five.jpg

可在浏览器Application-->Cache-->Application Cache 查看缓存