浅谈客户端存储

刺骨的言语ヽ痛彻心扉 2022-08-31 11:15 224阅读 0赞

> 微信公众号： **\[大前端驿站\]**
> 
> 关注大前端驿站。问题或建议，欢迎公众号留言。

与特定用户相关的信息应该保存在用户的机器上。无论是登录信息、个人偏好，还是其他数据， 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 存储的是对象，而不是数据表`。对象存储是通过定义键然后添加数据来创建的。游标用于查询对象存储中的特定数据，而 索引可以针对特定属性实现更快的查询…

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

![ddd906a1dc203fbe1e9c3cc07f798028.gif][]

关注下方【大前端驿站】

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

![e43524e51fd97a33555bdefed65b3ab1.png][]

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

[ddd906a1dc203fbe1e9c3cc07f798028.gif]: /images/20220829/0aa0f2af7c6e4e1f81022a3235cb033c.png
[e43524e51fd97a33555bdefed65b3ab1.png]: /images/20220829/9c014147b05e46f69b576262f32d6699.png