随着Web应用程序的出现，直接在客户端存储用户信息的需求也随之出现。与特定用户相关的信息应该保存在用户的机器上，比如登录信息、个人偏好等等。针对这个问题的第一个解决方案就是cookie。
cookie
HTTP cookie通常也叫作cookie，最初用于在客户端储存会话信息。这个规范要求服务器在响应HTTP请求时，通过Set-CookieHTTP头部包含会话信息。
1.限制
cookie是与特定域绑定的。设置cookie后，它会与请求一起发送到创建它的域。这个限制能保证cookie中存储的信息只对被认可的接收者开放，不被其他域访问。
因为cookie存储在客户端机器上，所以为保证它不会被恶意利用，浏览器会施加限制。会限制cookie个数、cookie的大小、每个域的cookie个数和每个域的字节。
2.cookie的构成
cookie在浏览器中有👇构成：
⚪名称：唯一标识cookie的名称。cookie名大小写不敏感，不过推荐区别大小写。必须通过URL编码
⚪值：存储在cookie里的字符串值。必须通过URL编码
⚪域：cookie的有效域。发的送到这个域的所有请求都会包含对应的cookie。
⚪路径：请求URL中包含这个路径才会把cookie发送到服务器。
⚪过期时间：表示何时删除cookie的时间戳。默认情况下，浏览器会话结束后会删除所有cookie。
⚪安全标志：设置之后，只在使用SSL安全连接的情况下才会把cookie发送到服务器上。
这些参数在Set-Cookie头部中使用分号加空格隔开👇
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value;expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value
这个头部设置了一个名字为"name"的cookie，这个cookie在上面写的那个时间过期，对www.worx.com和他的子域有效。
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value;expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com;secure
Other-header: other-header-value
在路径后面加上secure后表明这个cookie只能在SSL链接上发送。
3.JavaScript中的cookie
在JavaScript中处理cookie比较麻烦，因为接口过于简单，只有BOM的document.cookie属性。根据用法不同，该属性表现迥异。要使用cookie的属性时，document.cookie来返回页面中所有有效cookie字符串，以分号分开👇
name1=value1;name2=value2
所有名和值都是URL编码的，因此必须使用decodeURIComponent()解码。
在设置值时，可以通过document.cookie属性设置新的字符串。这个字符串被解析后会添加到原来的cookie中。设置cookie不会覆盖之前任何的cookie，除非设置了已有的cookie。设置cookie的格式👇，与Set-Cookie头部的格式一样：
name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
👆，只有cookie的名称和值是必须的👇最好使用encodeURIComponent()编码
document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas");
因为设置过于繁琐，📕中还给设置cookie编写了一个函数，以后用到会补充
4.子cookie
为了用更多的cookie发明的子cookie。我现在一个cookie都没有用，我看起来真的没啥用，以后用到了会补充。
5.使用cookie的注意事项
处理cookie的过程是在服务器上进行的，JavaScript并不能完成这个过程，所以cookie还是尽量保存必要的信息。
❗cookie中不要保存重要或敏感的信息。
Web Storage
Web Storage规范最新的版本是第二版，这一版规定的主要有两个目标：
⚪提供在cookie之外的存储会话数据的途径
⚪提供跨会话持久化存储大量数据的机制
定义了两个对象👇
localStorage：永久存储机制。
sessionStorage：跨会话的存储机制。
1.Storage类型
clear():删除所有值。
getItem(name)：取得给定name值。
key(index)：取得给定数值位置的名称。
removeItem(name)：删除给定name值。
setItem(name,value)：设置给定name值。
2.sessionStorage对象
使用setItem()方法直接给属性添加数据👇
//使用方法存储数据
sessionStorage.setItem("name","Nick");
//使用属性存储数据
sessionStorage.book = "Professional JavaScript";
3.localStorage对象
4.存储事件
文章内容参考：JavaScript高级程序设计（第四版）标题样式来自：juejin.cn/post/684490…
哪里写错了就联系我🐧：54269504
