浅谈客户端存储

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

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

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

cookie

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 日 7:10:24 过期，对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) // 键变化之前的值
})

对于 sessionStorage 和 localStorage 上的任何更改都会触发 storage 事件，但 storage 事 件不会区分这两者

注意Storage 类型只能存储字符串。非字符串数据在存储之前会自动转换
为字符串。 注意，这种转换不能在获取数据时撤销。

IndexedDB

IndexedDB 是类似于SQL 数据库的结构化数据存储机制。但IndexedDB 存储的是对象，而不是数据表。对象存储是通过定义键然后添加数据来创建的。游标用于查询对象存储中的特定数据，而 索引可以针对特定属性实现更快的查询…

上述客户端存储方式都有容量的限制,最重要的是，因为这些数据没有加密， 所以要注意不能使用它们存储敏感信息

关注下方【大前端驿站】

让我们一起学习，一起进步

【分享、点赞、在看】三连吧，让更多的人加入我们~~