[浏览器系列] ： 客户端本地存储
客户端存储
在目前的现代浏览器中主要有以下几种存储方案 1.cookie 2.localStorage 3.sessionStorage 4.indexDB
Cookie
Cokkie 定义
Cookie 是客户端存储数据的选项之一，它主要用于客户端存储会话信息。 它是由服务器在响应 HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含的会话信息。 浏览器将会话信息存储起来，并在之后的每一个请求中携带Cookie 数据返回给 服务器，来做唯一标识通信。
Cookie 限制
Cookie 是与特定域绑定的。这个限制可以保证只对指定的接受者开放，不能被其它人访问。 Cookie 通常 遵循的限制规则：
-
- 不能超过300个Cookie
-
- 每个Cookie 不能超过4096 字节
-
- 每个域不能超过 20 个 Cookie
-
- 每个域不能超过 81920 字节
如果 Cookie 总数超过了 单个域的 上限，浏览器会删除之前的Cookie。 不同浏览器表现不一样
- IE 和 Opera 会按照最近最少使用的原则删除之前的Cookie.
- Firefoxs 随机删除之前的 Cookie
如果创建的Cookie 字节超过了最大限制，则Cookie 会被删除。
Cookie 构成
名称 | 属性 |
|---|---|
名称 [ name ] | cookie 唯一标识名称，不区分大小写，建议小写。 |
值 [ value ] | 存储在 cookie 字符串值 |
域 [ Domain] | cookie 有效域的访问。 |
路径 [Path=PATH] | 指定哪些路由路径必须包含cookie 才可以访问 |
过期时间 [Expres=DATE] | 表示cookie 什么时候被删除。默认情况下(不设置过期时间)，浏览器在关闭时，cookie都会删除 |
安全标 [Secure ] | 设置之后，只在使用SSL安全链接情况下才会把cookie 发送给服务器。 |
读取cookie [HttpOnly] | 设置后只能在服务器上读取，不能再通过JavaScript读取Cookie |
缺点
- 容量问题：有上限，最大只能有 4KB
- 性能问题：同一个域名下的所有请求，都会携带 Cookie，某些请求（a,img,link等标签发出的请求）可能不需要此cookie，会加大传输的头部，损耗一定时空开销
- 安全问题：客户端可以通过一定手段（脚本，devtools，本地存储的文件，修改host文件）获取到，存在XSS,CSRF等安全问题
解决安全问题的方案
- 减短cookie的有效时间
- 添加HttpOnly属性：防止本地脚本读取cookie
- 服务端对传送的cookie加密
- 添加Secure属性：使用https协议传输
- 设置samesite属性为需要的值：严格卡控cookie的携带范围
Web Stronge
Web Stronge 的出现 主要是解决 cookie 的问题，存储不需要频繁发送服务端的数据。
它提供了 跨会话 持久化存储大量数据的机制。
Web Stronge 中 定义了两个对象
localStronge | 永久存储 |
|---|---|
sessionStronge | 会话存储 |
Stronge 提供的 方法
clear( ): 删除所有制 getItem( ): 获取指定name 值 removeItem( ) : 删除给定 name 键值对 setItem( ) : 设置给定name 值
优点
- 存储容量大:不同浏览器，存储容量可以达到 5-10M，针对一个域名
- 存储于客户端，不会服务端发生通信
缺点
- 只能存储字符串，JSON对象需要转换为json string 存储
- 只适用于存储少量简单数据
- localStorage需要手动删除
sessionStronge
sessionStronge 对象只存储会话数据，当页面关闭时，意味着会话结束，那么数据会清空。当页面 刷新 / 崩溃 时，数据还会保存在浏览器中，
使用 sessionStronge
// 设置会话key-value
// 属性存储数据
sessionStorage.name = '前端自学社区'
// 方法存储数据
sessionStorage.setItem('title', '测试'）
// 获取指定name值
sessionStorage.getItem('name')
// 删除会话数据
// 删除所有sessionStronge
sessionStorage.clear
// 删除指定key
sessionStorage.removeItem('name'）
// 获取sessionStronge 个数
sessionStorage.length
localStronge
本地数据持久化，永久的保存在浏览器中，除非主动删除。 由于它 是 Stronge 的实例， 它拥有 Stronge 所有的方法，用法和 sessionStronge 一样。
IndexedDB
运行在浏览器上的非关系型数据库 依旧受同源策略限制
学习资源
本文将不讲述了，日常开发用的少。
- [使用 IndexedDB] : https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB
- [浏览器数据库 IndexedDB 入门教程] : http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
参考
- 《JavaScript 高级程序设计第四版》
- MDN 资源
