前端须要了解的 Cookies 和 WebStorage

Cookies 和 WebStorage

为何须要客户端存储

• 记录用户登陆状态，当用户下次访问时没必要从新登陆
• 存储一些用户对应用的自定义偏好设置，例如主题色、表格每页默认显示条数等
• 一些广告商须要经过客户端端存储的一些用户行为数据来作一些更个性化的推荐

恰当的利用客户端存储能够很好的优化用户体验

Cookies

Cookies 是什么

Cookies 其实就是网站存储在客户端的一些数据
这些数据会自动的被加到网站发起的每一个 HTTP 请求的 Request Header 中
一般状况下服务端和客户端均可以对 Cookies 进行 CRUD 操做
点这里查看 Cookies 协议

如何在前端新增 Cookie

// 最简单的设置方式 属性所有采用默认值
document.cookie = 'name=value'
// 自定义 Cookie 属性
document.cookie = 'test=111; max-age=3600; domain=xx.com; path=/;'
复制代码

注意一次只能同时新增一个 Cookie

如何在前端修改或删除 Cookie

// 修改 test 为 222
document.cookie = 'test=222; max-age=7200; domain=xx.com; path=/'
// 删除 test
document.cookie = 'test=; max-age=0; domain=xx.com; path=/'
复制代码

这里要注意的是要确保 domain 以及 path 与待修改 Cookie 设置的一致
由于 Cookie 实际上是在同一个域名和路径下惟一
例如咱们访问 www.a.com/test/xx.html
能够同时存在 test=1; domain=a.com; path=/test 以及 test=1; domain=a.com; path=/
这俩个 name 相同可是 path 不一样的同名 Cookie
因此只有 name domain path 这三个值都相同时才能肯定一个 Cookie

如何读取 Cookie

经过 document.cookie 获取到的是全部数据
相似 name1=value1; name2=value2 的字符串
要拿来使用的话还需经过一系列字符串操做将须要的值取出

如何判断 Cookie 是否启用

因为 Cookie 涉及到用户的隐私，用户能够手动禁止浏览器使用 Cookie
绝大多数浏览器均可以经过如下代码来判断用户是否禁用 Cookie

navigator.cookieEnabled
复制代码

Ps: 经本人测试 禁用 Cookie 后 Github 淘宝 等都没法正常访问
感受如今大多数用户都不会去禁用 Cookie，否则会有一堆网站访问不了

关于 Cookie 的属性

• domain
  指定 Cookie 存储在哪一个域名下 默认为当前服务器的域名
  固然也遵循同源策略 例如在 www.son.a.com 页面下
  咱们能够设置 Cookie 的 domain 为 a.com
  这样在 www.another.a.com 页面也能够获取到该 Cookie
  可是不能在该页面试图去操做 domain 为 b.com 的 Cookie
• path
  指定 Cookie 存储在哪一个路径下 默认为当前 URI 中的路径
  例如在 www.a.com/page/one.html 咱们按默认属性设置了一个Cookie
  那么在 www.a.com/page/two.html www.a.com/page/son/three.html
  这些页面下均可以获取这个 Cookie
  可是在 www.a.com/another/four.html 页面上便没法获得这个 Cookie
  能够将 path 设为 / 使得访问当前域名下全部路径的网页都能拿到设置的 Cookie
• max-age 最大存储时间 以秒为单位 默认当浏览器 Session 结束时清除
• expires 存储失效的 GMT 时间 默认当浏览器 Session 结束时清除
• secure 包含该属性的 Cookie 只能经过 HTTPS 传输
• httponly
  只能在服务端进行设置
  包含该属性的 Cookie 只会在 Request Headers 中出现
  前端没法经过 document.cookie 查看修改

关于 Cookie 中的保留字符

因为 ; , 空格 在 Cookie 中有特殊含义
因此当存储的数据中包含这些特殊字符时
须要在存储前经过 encodeURIComponent 进行编码
读取前经过 decodeURIComponent 进行解码

Cookie 的优缺点

优势：

• 适合用于存放须要每一个请求都必须携带的数据
• 服务端也能够直接操做 Cookie
• 能够经过 domain 以及 path 控制数据存储的范围

缺点：

• 容量有限，规范只要求每一个域名下最低提供 4kb 的存储空间
• 每次请求都会携带，若是存放了大量没必要要的数据很显然会影响页面性能
• 不安全，永远不要在 Cookie 中存放用户的敏感数据
• 前端 API 不友好，CRUD 都是经过 document.cookie 进行，没有提供相关操做的方法

WebStorage

WebStorage 是什么

WebStorage 是 HTML5 新增的客户端存储机制
分为 LocalStorage 以及 SessionStorage
IE8+ 以及各现代浏览器对其都有良好的支持
点这里查看 WebStorage 规范

LocalStorage

永久存储（除非浏览器缓存被清除）在当前域下，遵循同源策略
若是在一个浏览器打开多个窗口访问同一域名的网站
那么这多个窗口中的 LocalStorage 是共享的

SessionStorage

存储周期为当前 Session ，一样遵循同源策略
要注意这里的 Session 和 Cookie 的默认存储 Session 不一样
SessionStorage 针对的是浏览器的每一个窗口，而不是整个浏览器的进程
正因如此，与 LocalStorage 不一样的是，多个窗口下的同域名网站，其 SessionStorage 也是分开存储的
Ps：要注意的是若是在一个窗口内访问的网站经过 <iframe> 内嵌了俩个同域名网站
那么这俩个 <iframe> 内嵌站点的 SessionStorage 是共享的

API

// sessionStorage 与 localStorage 一致
localStorage.a = 'test1' // 新增或修改
localStorage.a // 读取
localStorage['a'] // 读取

localStorage.setItem(a, 'test3') // 新增
localStorage.getItem(a) // 读取
localStorage.removeItem(a) // 删除
localStorage.clear() // 清空全部
localStorage.key(index) // 获取指定 index 存储键值对的 key
localStorage.length // 总共存储的键值对数量
复制代码

能够看到经过相似操做普通对象同样来操做 WebStorage
一般来讲这种方式更为简洁
可是也有相似 clear() removeItem() 等操做只能经过 API 进行

Storage Event

WebStorage 还提供了事件机制，用于监听存储发生的变化
当打开俩个窗口访问同域网站，若是在其中一个窗口中修改了存储数据
在另外一个窗口中能够经过以下代码监听到存储改变的事件

window.addEventListener('storage', e => {
	/** e: { key, // 发生改变的 key newValue, // 旧值 oldValue, // 新值 url, // 触发变化的文档 URL ... } */
})
复制代码

要注意的是这个事件只有在本地存储真的发生变化时才会触发
也就是说假设已经经过 localStorage.a = 'test' 设置了本地存储中 a 的值为 test
那么再次执行 localStorage.a = 'test' 并不会触发事件
而且经过 localStorage.removeItem('notExist') 试图移除一个不存在的属性时也不会触发事件
Ps:（因为 SessionStorage 是基于浏览器窗口存储，因此只有当使用 <iframe> 处理内嵌页面时才可能会触发事件）
这个机制能够用于实现应用的广播功能，当用户在一个窗口的页面进行操做时同步对另外一个窗口的页面作出修改
例如用户在一个窗口中修改了应用的主题色，咱们经过 localStorage.color = 'red' 来保存这一改变
另外一个窗口经过监听到 localStorage 的变化同步的将应用的主题色也修改成 red

WebStorage 的优点

• 每一个域下容许存储超过 5MB 的数据（各个浏览器有所不一样）
• 更友好的 API

其它注意事项

• 不论是 Cookies 仍是 WebStorage 都是与浏览器相关的
  也就意味着在 Chrome 浏览器中存储的数据，当用户切换为 FireFox 浏览时就没法获取
  固然这应该是小几率事件，毕竟大多数人习惯于使用同一种浏览器
• 当浏览器设置 Cookie 失败时并不会报错，这个过程是静默的
  例如当你试图跨域的去设置 Cookie 时只会发现不生效，但不会在控制台中看到相应错误信息
• 虽然 WebStorage 的规范但愿能支持对相似数组对象等结构化数据进行存储
  但目前为止大多数浏览器仅支持字符串做为 Value
  传入非字符串的值会被强制转化为字符串
  例如试图经过 localStorage.o = {a: 1} 存储一个对象
  会发现实际存储的是 o: "[object Object]"

---

（End）