cookie、localstorage、sessionstorage

cookie

实质的工作是保存状态。

为什么会有cookie？

因为http是无状态协议

http 无状态协议(上下文无关协议)在浏览器中，两个执行成功的请求是没有关系的。比如一个电商页面，两次加入购物车会请求时，但是两次请求没有关系。浏览器就不知道选择了。登录状态也是。登录一次成功取到了，刷新页面登录状态又不见了，后面就没有关系了。这时候就需要用到cookie来记录状态了。

浏览器第一次请求数据的时候，服务端会把cookie携带在数据中。浏览器再进行请求时，会把cookie传回去，这样服务端就能识别了。

同样的域名下的话，每次请求都会传cookie，所以cookie数据多的话开销就大了，所以可以用它来存比较重要的。或者简洁的数据。

cookie属性

登录时，cookie里面有个id可以供服务器识别。cookie存在浏览器里面。cookie数量在50个左右，大小在4kb左右。超过就会删除。

cookie每次只能设置一个，就是name只有一个

存在document上

// 这样就算两个name了，不能这样子设置
document.cookie='name=xiaowang;age=18';  
// 这样设置的话，name加name属性上，把xiaowang加在value属性上。后面算是第二个了。所以无效。

// 这样设置才是正确的。
document.cookie="margin=123;path=/;expires="+new Date(2008,1,1);  // 1 是 二月

1. name (cookie的名字，名字唯一性)
2. value (cookie的值, 经过加密)
3. Domain （由他来决定哪个域可以用到这个cookie，在哪个域下有效）
4. Path (cookie有效使用的路径，和domain一起使用，然后在限定的地址可以使用(domain+path限制)。)domain和path都要正确才能访问到cookie
5. Expires (确定cookie的过期时间,到什么时候结束，格式为GMT, new Date(2008,1,1) 这个new Date是取的电脑右下角的时间。 默认值（session）浏览器关闭就没了)
6. size (大小)
7. max-age (存活多长时间)
   -1 临时的不存在
   0 存活0秒
   正数 存活。。。秒
8. HttpOnly 有这个标记的cookie，前端无法获取
9. Secure 设置cookie只能通过https传输。
10. SameSite 设置cookie在跨域请求的时候不能被发送。

storage

console.dir(Storage)可以显示一个对象所有的属性和方法。

localstorage，sessionStorage都是继承Storage对象和方法。

1. length 本地存储数据的数量
2. key() 通过索引找到存储数据（鸡肋，被浏览器处理了之后就不是原来的顺序了）
3. getItem() 通过键名取到本地存储的数据
4. setItem() 设置一个本地存储数据
5. removeItem() 删除一个本地存储数据
6. clear() 清空本地存储数据

localstorage

存储5mb(5兆)

不能跨域

不会过期，需手动删除,除了手动删除还有无痕模式也会删除数据库

// 普通数据
localStorage.setItem('name', 'kaivon');

// 对象数据存储
var arr = ['red','green']
localStorage.setItem('color', JSON.stringify(color));  //  先转化为字符串
console.log(JSON.parse(localStorage.getItem('color'))); // 获取对象数据

sessionstorage

会话级，会话存储，页面关了之后就没了