彻底读懂客户端存储

小二航
322 阅读5分钟

1.cookie

由于HTTP是无状态的协议，客户端发送请求，服务端作出响应后，再次发送请求时服务端无法知道客户端是谁。设计cookie的目的是为了能够直接在客户端上存储用户信息，与特定的用户相关的信息应该保存在用户的机器上。

cookie作为在客户端存储数据的一个选项，要求服务器在响应HTTP请求时，通过Set-CookieHTTP头部包含会话信息。

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

设置一个名为"name"，值为"value"的cookie。在发送时会经过URL编码，浏览器会存储这些会话信息，并且在之后的每个请求中都会通过HTTP头部cookie再将它们发回服务器。

GET /index.jsl HTTP/1.1
Cookie: name=value
Other-header: other-header-value

这些发送回服务器的额外信息可以作为发送请求的客户端的唯一标识，服务器对cookie进行解析，能够拿到客户端的状态。

cookie自身的一些缺陷：

  • 每个cookie的大小不能超过4096字节
  • 浏览器中不超过300个cookie
  • 每个域不超过20个cookie
  • 每个域不能超过81920字节

如果cookie总数超过了单个域的上限，浏览器就会删除之前设置的cookie。

为了跨浏览器兼容，最好保证cookie的大小不超过4095字节。这个大小的限制通常适用于一个域所有cookie，而不是单个cookie。

cookie的构成：

  • 名称：不区分大小写
  • 值：存储在cookie里的字符串值，这个值必须经过URL编码。
  • 域：cookie有效的域。发送到这个域的所有请求都会包含对应的cookie。
  • 路径：请求URL中包含这个路径才会把cookie发送到服务器。
  • 过期时间：表示何时删除cookie的时间戳（即什么时间之后就不会发送到服务器了）。默认情况下，浏览器会话结束之后会删除所有cookie。可以设置删除cookie的时间。
  • 安全标志：设置之后，只有使用SSL安全连接的情况下才会把cookie发送到服务器。

JavaScript中的cookie：

  • document.cookie返回包含页面中所有有效cookie的字符串（根据域，路径，过期时间和安全设置），通过分号间隔

    name1=value1;name2=value2;name3=value3;

注意事项：

  • 存在一种叫做HTTP-only的cookie。HTTP-only可以在浏览器设置，也可以在服务器设置，但是只能在服务器上读取，这是因为JavaScript无法取得这种cookie的值。

  • 所有cookie都会作为请求头部由浏览器发送给服务器，所以在cookie中保存大量信息可能会影响特定域浏览器请求的性能。保存的cookie越大，请求完成的时间就越长。

2.WebStorage

  • 提供在cookie之外的存储会话数据的途径
  • 提供跨会话持久化存储大量数据的机制
  • 由localStorage和sessionStorage组成

Storage类型

Storage类型用来保存名/值对数据，直至存储空间上限。（这个上限是由浏览器决定的）该类型的实例与其他对象一样，不过增加了如下方法：

clear() // 删除所有值 FireFox中未实现
getItem(name) // 取得给定的name值
key(index) // 取得给定数值位置的名称
removeItem(name) // 删除给定name的名/值对
setItem(name,value) // 设置给定name的值

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

localStorage

永久存储机制。localStorage对象作为在客户端持久存储数据机制，在访问同一个localStorage对象时，要求页面必须来自同一个域，在相同的端口上使用相同的协议。

sessionStorage

  • 跨会话的存储机制。

  • 数据只会存储到浏览器关闭，与浏览器关闭时cookie删除类似。

  • 存储在sessionStorage中的数据不会受页面刷新的影响，可以在浏览器崩溃并重启后恢复。sessionStorage的特点可以用于对表单信息进行维护，即将表单数据存储在它里面，可以保证页面及时刷新也不会让之前填写的表单信息丢失。

  • sessionStorage对象与服务器会话紧密相关，在运行本地文件时不能使用。

  • sessionStorage是Storage的实例，可以通过使用setItem()方法或直接给属性赋值给他添加数据。

    sessionStorage.setItem("name","Value");

    sessionStorage.book = "EXESDAD";

WebStorage的限制

客户端数据的大小限制是按照每个源（协议、域名、端口号）来设置的。每个源有固定大小的数据存储空间，分析存储数据的页面的源可以加强这一限制。

大多数浏览器会设置localStorage和sessionStorage的存储空间为每个源5MB。

3.IndexedDB

IndexedDB是运行在浏览器中的类似于MySql或Web SQL Database的数据库, 区别是该数据库使用对象存储而不是表格存储数据。

IndexedDB属于非关系型数据库，他与前面的cookie和WebStorage不是同一个量级的，数据库通常可以认为是无限大的。

IndexedDB的限制：

  • 受同源策略的影响，信息不能跨域共享。

  • 每个源都有可以存储的空间限制

  • Firefox的限制是每个源50MB，Chrome是5MB。Firefox浏览器要求本地文本不能访问IndexedDB数据库。

小结：

  • cookie只能存储4096字节大小的数据，只能保存一些必要的信息。
  • localStorage用于会话之外持久保存数据。
  • sessionStorage用于严格保存浏览器一次会话期间的数据，因为数据会在浏览器关闭时被删除。
  • IndexedDB类似于SQL数据库的结构化数据存储机制，但是存储的时对象，而不是数据表。
  • 客户端存储技术能够使客户端使用JavaScript存储客观的数据，这些数据没有进行加密，所以不要在其中存储重要或者敏感的信息。例如cookie以纯文本的形式在浏览器和服务器中传递，容易被非法用户截获和篡改。

以上文章是作者阅读JavaScript高级程序设计一书时为了强化记忆完成的，留作个人总结复习使用，轻喷，谢谢哈！

avatar
文章
阅读
粉丝