js红宝石 第二十五章-客户端存储

与特定用户相关的信息应该保存到用户的机器上

最早的解决方法就是cookie

25.1 cookie

这个规范要求服务器在响应Http请求时,通过发送Set-Cookie Http头部包含会话信息

这个响应会设置一个 name=value 的cookie

这两个值都会根据URL进行编码

25.1.1 限制

cookie是和特定的域绑定的

在设置cookie后,他会和请求一起发送到创建它的域

这个限制能保证cookie中存储的信息只对被认可的接收者开放

具体的限制:p752

25.1.2 cookie的构成

cookie是由以下参数构成的:

名称: 唯一标识的cookie名称

值: 储存在cookie中的字符串,必须经过URL编码

域: cookie有效的域

路径: 请求URL中包含这个路径才会把cookie发送到服务器

过期时间: 标识何时删除cookie的时间戳

安全标志: 只在使用SSL安全连接的情况下才会把cookie发送到服务器

25.1.3 JS中的cookie

JS中的接口只有document.cookie属性

会返回包含页面中所有有效的cookie字符串

所有的键值对都需要经过decodeURIComponent()编码

25.1.4 子cookie

为了绕过浏览器对每个域cookie数量的限制,提出了子cookie的概念

本质上是使用cookie的值在单个cookie中储存多个名/值对

最常用的模式如下:

name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

类似查询字符串

25.1.5 注意事项

还有一种叫HTTP-only的cookie,只能在服务器读取,无法被JS获取

在cookie中保存大量信息会影响性能,因此最好只保留重要信息

不要再cookie中保存重要信息,因为任何人都能取得

25.2 Web Storage

目的是解决通过客户端存储不需要频繁发送回服务器的数据却使用了cookie存储

25.2.1 Storage类型

Storage类型用来保存名/值对数据

和其他实例相似,但是增加了以下方法:

clear(): 删除所有值

getItem(name): 取得给定name的值

key(index): 取得给定数值位置的name

removeItem(name): 删除给定name的名值对

setItem(name,value): 设置名值对

25.2.2 sessionStorage对象

sessionStorage对象只存储会话数据,意味着只会保存到浏览器关闭

不受页面刷新影响,可以在崩溃重启后恢复

sessionStorage对象和服务器会话紧密相关,因此在浏览本地文件时不能使用

sessionStorage对象是Storage的实例,所以可以使用Storage的方法

25.2.3 localStorage对象

localStorage对象取代了globalStorage,作为在客户端持久储存数据的机制

要访问loaclStorage,必须来自同一个域的同一个端口

25.2.4 储存事件

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

事件对象有四个属性:

domain: 储存变化对应的域

key: 被设置或删除的值

newValue: 键被设置的新值

oldValue: 键变化之前的值

25.2.5 限制

查阅web.dev上的文章

25.3 IndexedDB

是浏览器储存结构化数据的一个方案

IndexedDB的设计基本上是异步的

25.3.1 数据库

IndexedDB是数据库,但是使用对象存储数据而不是表格

使用IndexedDB.open()传入一个要打开的数据库

会返回一个IndexedDB的实例

25.3.2 对象储存

使用对象储存值,要设置好主键

25.3.3 事务

创建了对象存储之后,剩下的操作都是用事务完成的

事务要通过transaction()创建

要修改或者读取数据,都要通过事务

事务的处理程序:onerror和oncomplete可用获取其生命周期

25.3.4 插入对象

拿到了对象存储的引用后,可以使用下面的方法写入数据

add() 添加新值

put() 重写对象

25.3.5 游标查询

通过事务可用一个键取得一条信息,要取得多条数据,需要使用游标

游标指向第一个结果,并在调用指定前不会主动查找下一条数据

使用openCursor()创建游标,要为其添加onsuccess 和 onerror事件处理

在onsuccess中,可用使用event.target.result访问下一条记录

游标可以用来更新个别记录,使用update()

delete()可用删除游标记录的位置

创建另一个请求:

continue(key) 移动到结果集中的下一条记录

advance(count): 游标向前移动指定的count条记录

25.3.6 键范围

使用键范围可用让游标更容易管理

有四种方式:

only(key) 获取指定键的值

lowerBound(key) 定义结果集的下界

upperBound(key) 定义结果集的上界

bound(k1,k2,boolean,boolean) 下界,上界,是否跳过下界,是否跳过上界

25.3.7 设置游标方向

openCursor()可以接受两个参数

第一个是IDBKeyRange的实例

第二个是表示方向的字符串:

默认的方向是"next"

"nextunique"则会跳过重复的记录

25.3.8 索引

在某些情况下,可以为对象存储指定多个键

使用creatIndex()创建索引

creatIndex()的参数:

索引的名称

索引属性的名称

包含键unique的options对象

creatIndex()返回的是IDBIndex实例,在存储对象上调用index()方法也可以得到

删除索引不会影响存储的数据

25.3.9 并发问题

第一次打开数据库时,要添加onverisonchange事件,以免造成升级数据库时的问题

25.3.10 限制

IndexedDB数据库是和页面源绑定的,因此不能跨域共享