视频讲解地址：https://www.bilibili.com/video/BV1ud4y1D7sB/?vd_source=66e2692cc471862d6c3f85dc4b9ea5dd
cookie
概念
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K
左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
cookie的优点：具有极高的扩展性和可用性
通过良好的编程，控制保存在cookie中的session对象的大小
通过加密和安全传输技术，减少cookie被破解的可能性
只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失
控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie
cookie的缺点：
cookie的长度和数量的限制。每个domain(领域，范围)最多只能有20条cookie，
每个cookie长度不能超过4KB，否则会被截掉
安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么
作用
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。
若把计数器保存在客户端，则起不到什么作用
cookie的作用
- 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
- 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便
- 定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
cookie代码实现方式
添加cookie
//添加cookie
addCookie(){
document.cookie = "username=mochengxiya"
document.cookie = "age=18"
},
结果：
1.png
读取cookie
//读取cookie
readCookie(){
let msg = document.cookie
console.log('读取cookie',msg);
},
结果：
2.png
添加过期时间
Cookie的过期与删除本质是一回事. 当服务端想让客户端删除一个cookie时, 它会给客户端颁发一个
同名cookie(此时一般会将value设置成空白字符串), 只是这个cookie的存活时间已经过期(通过
设置Expires或Max-Age).
Cookie有两个属性可以用于控制存活时长: Expires 和 Max-Age. Expires指定一个时间点, 超过
这个时间点之后客户端Cookie过期
(将会由浏览器清除). Max-Age指定浏览器自从收到该cookie后可以保存多少时间, 单位是秒.
所有浏览器都支持Expires.
新的浏览器都会支持Max-Age, 并且它优先级比Expires更高.
老版本IE只能识别Expires.
// 添加过期时间（单位：天/秒）
addExpirationTime(){
// age它是一个本地时区的，所以，主要原因是这个过期时间是本地时区，所以没办法失效，
// 用toGMTString()转换为 GMT 时区。就可以正常失效清除cookie了
let d = new Date(new Date().getTime() + 30000) //设置过期时间
document.cookie = "username=mochengxiya;"+"expires="+d.toGMTString() //username可以失效清空缓存
document.cookie = "age=18;"+"expires="+d //age失效不可以清空缓存
},
删除cookie
deleteCookie(){
let d = new Date(new Date().getTime() - 30000)
document.cookie = "username=mochengxiya;"+"expires="+d.toGMTString()
}
sessionStorage
仅在当前会话下有效，关闭页面或浏览器后被清除。
存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
session代码实现方式
添加session
// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
sessionStorage.setItem('Author', 'session');
结果：
22323.png
取、删、清除所有session
// 2、从本地存储获取数据
sessionStorage.getItem('Author');
// 3、从本地存储删除某个已保存的数据
sessionStorage.removeItem('Author');
// 4、清除所有保存的数据
sessionStorage.clear();
引用数据存储
上面都是对于简单的数据类型的存储，但当要存储的数据是一个对象或是数组的时候，
直接存储是不行的。
错误的存储：
let user = {
username: 'mochengxiya',
password: '123456'
};
sessionStorage.setItem('user', user);
console.log(sessionStorage.getItem('user'));
结果：
333.png
这个时候，就需要转换数据格式。
存储数据前：利用JSON.stringify将对象转换成字符串
获取数据后：利用JSON.parse将字符串转换成对象
var user = {
username: 'liu',
password: '123456'
};
user = JSON.stringify(user);
sessionStorage.setItem('user', user);
let data = sessionStorage.getItem('user');
console.log(JSON.parse(data));
结果：
444.png
localStorage
localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。
存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
// 1、保存数据到本地
// 第一个参数是保存的变量名，第二个是赋给变量的值
localStorage.setItem('Author', 'local');
// 2、从本地存储获取数据
localStorage.getItem('Author');
// 3、从本地存储删除某个已保存的数据
localStorage.removeItem('Author');
// 4、清除所有保存的数据
localStorage.clear();
注意：引用数据存储也是要存储数据前：利用JSON.stringify将对象转换成字符串，获取数据后：利用JSON.parse将字符串转换成对象
