浏览器的几种本地存储
不推荐使用 Cookie 作为客户端储存，这样做虽然可行，但是并不推荐，因为 Cookie 的设计目标并不是这个，它的容量很小（4KB），缺乏数据操作接口，而且会影响性能。客户端储存应该使用 Web storage API（就是 localStorage 和 sessionStore） 和 IndexedDB
一、Cookie
HTTP协议（应用层超文本传输协议），用于从Web服务器传输超文本到本地浏览器，是一个无状态的协议，即不记录状态，cookie 的存在就是为了解决HTTP不记录状态的情况，是缓存在本地客户端的数据。向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。Cookie 主要用来分辨两个请求是否来自同一个浏览器，以及用来保存一些状态信息
完整参考👉http://javascript.ruanyifeng.com/bom/cookie.html
1. cookie 的属性：
Name、Size 故名思意
Value：保存用户登录状态，应该将该值加密，不能使用明文
Path：可以访问此 Cookie 的路径。比如 juejin.cn/editor ，path是/editor，只有/editor这个路径下的才可以读取 Cookie
httpOnly：表示禁止通过 JS 访问 Cookie，减少 XSS（即代码注入式） 攻击。也就是 document.cookie 不能查看/修改 cookie
Secure：只能在 https 请求中携带
SameSite：用来防止 CSRF 攻击和用户追踪，规定浏览器不能在跨域请求中携带 Cookie 减少 CSRF（有点像钓鱼网址，跳到另一个网站，携带了登录状态下的信息攻击，详细明看这里 👉https://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html
Domain：域名，跨域或者 Cookie 的白名单，允许一个子域获取或操作父域的 Cookie，实现单点登录的话会非常有用
Expires/Max-size：指定时间或秒数的过期时间，没设置的话就和 Session 一样关闭浏览器就失效，Max-size 优先级高于 Expires
2. cookie 缺点
- 容量缺陷。Cookie 的体积上限只有4KB，只能用来存储少量的信息。
- 性能缺陷。Cookie 紧跟域名，不管域名下面的某一个地址需不需要这个 Cookie ，请求都会携带上完整的 Cookie，这样随着数的增多，其实会造成巨大的性能浪费的，因为请求携带了很多不必要的内容。
- 安全缺陷。由于 Cookie 以纯文本的形式在浏览器和服务器中传递，很容易被非法用户截获，然后进行一系列的篡改，在 Cookie有效期内重新发送给服务器，这是相当危险的。另外，在 HttpOnly 为 false 的情况下，Cookie 信息能直接通过 JS 脚本来读取。
- 跨域名不能共享 Cookie，同源策略：即协议、域名、端口号都相同
二、Web storage API
Web Storage 又叫浏览器端数据储存机制
Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage，两者有一个本质的区别，那就是前者只是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了，除了这个区别其他属性方法基本一致
属性1个和方法5个，属性只有 Storage.length （window.localStorage.length），方法有 Storage.setItem() 、Storage.getItem()、Storage.removeItem()、Storage.clear()、Storage.key()；结合使用Storage.length属性和Storage.key()方法，可以遍历所有的键。
详细参考 👉🏼https://javascript.ruanyifeng.com/bom/webstorage.html
1. localStorage
localStorage有一点跟Cookie一样，就是针对一个域名，即在同一个域名下，会存储相同的一段localStorage。
相比于cookie
容量。localStorage 的容量上限为5M，相比于Cookie的 4K 大大增加。当然这个 5M 是针对一个域名的，因此对于一个域名是持久存储的。
只存在客户端，默认不参与与服务端的通信。这样就很好地避免了 Cookie 带来的性能问题和安全问题。
接口封装。通过localStorage暴露在全局，并通过它的 setItem 和 getItem等方法进行操作，非常方便。
应用：利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，比如官网的logo，存储Base64格式的图片资源，因此利用localStorage
2. sessionStore
特点：
容量。容量上限也为 5M。
只存在客户端，默认不参与与服务端的通信。
接口封装。除了sessionStorage名字有所变化，存储方式、操作方式均和localStorage一样。
应用：可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。
三、IndexedDB
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作，是运行在浏览器中的非关系型数据库
IndexedDB 是一个比较复杂的 API，操作看文档
参考看👉http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
|