浅谈客户端存储-蒲公英云

浅谈客户端存储

微信公众号： [大前端驿站]

关注大前端驿站。问题或建议，欢迎公众号留言。

与特定用户相关的信息应该保存在用户的机器上。无论是登录信息、个人偏好，还是其他数据， Web 应用程序提供者都需要有办法把它们保存在客户端，本篇旨在浅谈客户端存储的解决方案

HTTP cookie规范要求服务器在响应 HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含会话信息。
cookie是与特定域绑定的。设置 cookie 后，它会与请求一起发送到创建它的域。这个限制能保证 cookie 中存储的信息只对被认可的接收者开放，不被其他域访问

HTTP/1.1 200 OK 
Content-type: text/html 
Set-Cookie: name=value; domain=.wrox.com; path=/; secure 
Other-header: other-header-value

这个头部设置一个名为”name”的 cookie，这个 cookie 在 2007 年 1 月 22 日 724 过期，对www.wrox.com及其他 wrox.com 的子域（如 p2p.wrox.com）有效
这里创建的 cookie 对所有 wrox.com 的子域及该域中的所有页面有效（通过 path=/指定）。不过，这个 cookie 只能在 SSL 连接上发送，因为设置了 secure 标志

javascript处理cookie的方法

读：document.cookie(返回”name=value”的字符串)
写：document.cookie = ‘love=web’
删：设置过期时间为过去的时间

HTTP-only的cookie只能在服务器上读取，JavaScript 无法取得这种 cookie的值

Web Storage

Web Storage包含localStorage 和 sessionStorage。这两种浏览器存储 API 提供了在浏览器中***不受页面刷新影响***而存储数据的两种方式
localStorage 是永久存储机制，sessionStorage 是跨会话的存储机制.

javascript处理storage的方法
读

getItem(name)：取得给定 name 的值
key(index)：取得给定数值位置的名称
length：获取长度
写
setItem(name, value)：设置给定 name 的值
删
removeItem(name)：删除给定 name 的名/值对
clear()：删除所有值

存储事件

每当 Storage 对象发生变化时，都会在文档上触发 storage 事件

window.addEventListener('storage', event => { 
    console.log(event.domain) // 存储变化对应的域
    console.log(event.key) // 被设置或删除的键
    console.log(event.newValue) // 键被设置的新值，若键被删除则为 null
    console.log(event.oldValue) // 键变化之前的值
})