6.16 cookie，本地保存

1.cookie

是由W3C组织提出，最早由Netscape社区发展的一种机制。由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

简单说cookie会话跟踪技术

在一次会话从开始到结束的整个过程中,全程跟踪记录客户端的状态,例如是否登录,购物车信息, 是否已经下载,是否已经点赞,视频播放进度等

1. cookie的作用与特性

cookie是存储在浏览器中的缓存信息

1.1 作用:

1. 登录记录
2. 多个页面的数据传递
3. 保存用户信息

1.2 完整的格式

name=value;[expires=date];[path=path]

1.3 特点:

1. 存值不大(最大可以存4kb)
2. 每个域名下最多存储50条数据(不同浏览器会有不同)
3. 可以自己设置过期时间
4. 具有不可跨域性

1.4 中文的编码

中文与英文字符不同，中文属于Unicode字符，在内存中占4个字符，而英文属于ASCII字符，内存中只占2个字节。Cookie中使用Unicode字符时需要对Unicode字符进行编码，否则会乱码。

所以cookie直接存中文可能会出现乱码

encodeURIComponent 将中文编译成对应的字符

decodeURIComponent 将对应的字符转为中文

2. 设置cookie

我们可以先检查缓存cookie

console.log(document.cookie)

设置cookie

document.cookie = 'name=kobe'

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

3… 设置过期时间

设置cookie的过期时间使用expires

var date = new Date(new Date().getTime() + 1*60*1000) ;
document.cookie = 'name=yzh;expires =' + date.toGMTString();
console.log(document.cookie)

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

var date = new Date(new Date().getTime() -1) ;
document.cookie = 'name=wuwei;expires =' + date.toGMTString();
console.log(document.cookie)

4. 设置多个cookie

var date = new Date(new Date().getTime() + 30 * 60 * 1000);
document.cookie = 'name=wuwei;expires =' + date.toGMTString();
document.cookie = 'pwd=w123456;expires =' + date.toGMTString();
console.log(document.cookie)

5. 封装设置cookie

5.1 设置cookie

// 封装的设置一个cookie的函数
function setCookie(data){
    var date = new Date(new Date().getTime() + data.time * 60* 1000).toGMTString();
   	document.cookie = data.name +'='+ data.value+';expires='+date

}
setCookie({
    name:'zhangsan',
    value:18,
    time:5
})

5.3 封装删除cookie

清除cookie

思路就是将cookie时间设置为已经过期的时间浏览器会自动清楚过期的cookie

function removeCookie(name){
    document.cookie = encodeURIComponet(name) + "=;expires=" + new Date(0)
}

6. 封装设置多个cookie

function setCookie(data){
    data.forEach((item,index)=>{
        var date = new Date(new Date().getTime() + item.time * 60* 1000).toGMTString();
        document.cookie = item.name +'='+ item.value+';expires='+date
    })

}
setCookie([
    {
        name:'zhangsan',
        value:18,
        time:5
    },{
        name:'lisi',
        value:30,
        time:10
    },{
        name:'wangwu',
        value:41,
        time:10
    }
])

7. 设置所有cookie常用的属性

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

二.本地存储

本地存储是HTML5中新增的特性,用来解决cookie存储空间不足的问题

1、概述：

对于Web Storage来说，实际上是Cookies存储的进化版。

背熟这句口诀：“两个接口，四个函数”。

2、口诀：

（1）两个接口：分别是sessonStorage和localStorage

（2）四个函数：分别是setItem、getItem、removeItem和clear

1. Storage

1.1 sessionStorage

​ session临时回话，从页面打开到页面关闭的时间段
​ 窗口的临时存储，页面关闭，本地存储消失

​ 临时存储就是存储一下,其他页面并不会共享

1.2 localStorage

​ 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存。

​ 永久存储（可以手动删除数据）

​ 同域名多个页面可以共享

2. Storage的特点

1. 永久存储
2. 存储量限制 ( 5M ) 客户端微型数据库
3. 客户端完成，不会请求服务器处理
4. sessionStorage数据是不共享、 localStorage共享
5. 浏览器不统一,并且在IE8以下不兼容
6. 储存的值限定是字符串类型,需要我们通过JSON 对象去转换
7. 存储内容多的话会消化内容空间,会导致变卡

3. Storage API

3.1 setItem(键名，键值):

​ 设置数据，(key,value)类型，类型都是字符串
​ 可以用获取属性的形式操作

​ 在本地客户端存储一个字符串类型的数据，其中，第一个参数“键名”代表了该数据的标识符，而第二个参数“键值”为该数据本身。

​

例如:

 localStorage.setItem("name", "wuwei");

3.2 getItem():

读取已存储在本地的数据，通过键名作为参数读取出对应键名的数据。如：

​ 获取数据，通过key来获取到相应的value

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

3.3 removeItem():

​ 移除已存储在本地的数据，通过键名作为参数删除对应键名的数据。

​ 删除数据，通过key来删除相应的value

 localStorage.removeItem("name");   

3.4 clear():

​ 移除本地存储所有数据。删除全部存储的值

localStorage.clear();  

1.4 示例:

<button id="addData">添加数据</button>
<button id="getData">获取数据</button>
<button id="removeData">删除数据</button>
<input type="text" id="txt">

<script>
    addData.onclick = function () {
        sessionStorage.setItem('name', txt.value);
    }
    getData.onclick = function () {
        alert(sessionStorage.getItem('name'))
    }
    removeData.onclick = function () {
        sessionStorage.removeItem('name')
    }
</script>

临时存储,只要页面不关闭,无论怎么刷新,数据都不会删除

3.5 存储事件:(了解就OK)

​ 当数据有修改或删除的情况下，就会触发storage事件
​ 在对数据进行改变的窗口对象上是不会触发的
​

1. Key : 修改或删除的key值，如果调用clear(),key为null
2. newValue : 新设置的值，如果调用removeStorage(),key为null
3. oldValue : 调用改变前的value值
4. storageArea : 当前的storage对象
5. url : 触发该脚本变化的文档的url
   ​ 注：session同窗口才可以

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);
})