这是我参与更文挑战的第15天，活动详情查看：更文挑战
[重学JavaScript系列文章连载中...]
Cookie和localstorage都是客户端存储数据的方案，当然还有SessionStorage会话级的存储，这篇文章主要聊聊Cookie和localstorage，整理总结下知识点，并回答下鹅厂关于此部分的面试题，二者怎么选择，哪个更安全？
Cookie
cookie，也叫做HTTP cookie，通常由服务器对任意Http请求发送Set-Cookie Http头作为响应的一部分，其中包含会话信息。
基础构成如下：
Set-Cookie:name=test; Path=/; Domain=xx.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None
名称：一个唯一确定的Cookie名称，不区分大小写，需要经过URL编码。
值：存在在cookie中的字符串值，需经过URL编码。
域（Domain）：配置cookie对哪个域有效。所有向该域发送的请求都会带上cookie信息，可以包含子域也可以不包含。没有设定，默认来自设置cookie的那个域。
路径(Path)：对于指定域中的那个路径，应该向服务器发送cookie。
失效时间：表示cookie何时被删除的时间（停止向服务器发送cookie的时间）。默认情况下，浏览器会话结束时即删除所有cookie数据，不过也可以设置删除时间。配置删除时间后，cookie可在浏览器关闭后仍然保存在用户机器上，前提是设置的时间是未过期时间。配置方式，Expires属性指定的日期或在Max-Age属性指定的一段时间后删除。
安全标志(Secure)：指定后，cookie只有在使用SSL连接的时候才发送服务器。
HttoOnly：JavaScript Document.cookie API无法访问具有HttpOnly属性的cookie。它仅发送到服务器。例如，持久化服务器端会话的cookie不需要对JavaScript可用，并且应该具有HttpOnly属性。此预防措施有助于缓解跨站点脚本（XSS）攻击。
URL编码：encodeURIComponent（编码）/decodeURIComponent（解码）
Localstorage
H5提出的持久化保存客户端数据的方案，不能给localstorage指定任何访问规则，只能按设定好的规则走。访问同一个localstorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。
SessionStorage
sessionStorage对象存储特定于某个会话的数据，也就是数据只能保存到浏览器关闭。存储的数据可以跨越页面刷新而存在。因为sessionStorage对象绑定于某个服务器会话，所以当文件在本地运行的时候是不可用的。且数据只能由最初给对象存储数据的页面访问到，对多页面应用有限制。
Cookie和LocalStorage的区别
Cookie和localStorage均受到同源策略的保护，以防止不受相关域的访问。不同之处在于只能通过JavaScript访问localStorage，Cookie可通过JavaScript访问以及与每个HTTP请求一起发送。
与cookie相比，使用localStorage没有太多安全性好处。两者之间的差异是因为目标不同：localStorage可用于仅在JavaScript中使用的内容，Cookie还可用于在服务器上存储您所需的东西。可以访问用户计算机浏览器的任何人都可以访问这两者，并且可以通过在网页上执行的JavaScript来访问localStorage和cookie。
浏览器以相同的方式存储cookie和本地存储中的数据。如果您担心存储在用户计算机上的数据的安全性，那么LocalStorage不会提供比cookie更安全的好处。实际上，这甚至可能会带来更大的风险，因为您可以将Cookie设置为在一定时间后过期，而localStorage不会过期。因此，与使用cookie相比，保存在localStorage中的数据在用户计算机上的保留时间可能更长。
至此完成了常用存储的知识学习。
