前端开发的客户端本地存储

• sessionstorage
•  
•  html5
•  
• indexeddb
•  
• localstorage
•  
• javascript

4

在前端开发过程中，为了与服务器更方便的交互或者提升用户体验，我们都会在客户端（用户）本地保存一部分数据，比如

cookie/localStorage/sessionStorage

。在后端管理系统的前端，更是会涉及到一部分超大数据的请求，一个接口有时会达到5M甚至15M的程度，当这个接口数据并不是经常更新时，我们可以用两种方式，一种是分页请求+预加载+懒加载，另一种就是本地存储+热更新。而由于第二种方式用户体验更优秀，便是我常用的方式。

这篇文章的客户端本地存储，我们主要讲到

cookie/localStorage/sessionStorage/indexedDB

四种技术。

cookie

HTTP Cookie

通常简称

cookie

，该标准用于浏览器存储会话信息，在发起HTTP请求时携带

Cookie

参数：

[code]// Request Header

GET /oss/index.php?r=api/jlog/collect HTTP/1.1
Host: gzhxy.baidu.com:8090
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

···

Cookie: name=Leon; age=24

Cookie

有一些限制：

• 它是以

  ; 

  （分号+一个空格）分割的键值对字符串，在网络传送时必须是URL编码的。
• 绑定在固定域名下，不允许其它域名访问。
• 有些浏览器有数量限制，在超出后删除顺序不统一，有些最近最少使用

  （LRU）

  ，有些随机删
• 同一域名下总大小限制

  5KB

  ，超出限制后静默失败

Cookie

的参数构成：

• 名称：唯一确定，不区分大小写（实际编写建议区分），必须URL编码
• 值：字符串值，必须URL编码
• 域：该

  cookie

  字段有效的域，可以为

  baidu.com

  域名，也可以为

  cdn.baidu.com

  子域名，缺省值为当前页面子域名
• 路径：该

  cookie

  字段有效范围为指定域下的具体路径，如

  cdn.baidu.com/oss

  ，那么其他路径就无法访问
• 失效时间：

  cookie

  被删除的时间戳，缺省值为浏览器会话结束被删除，也可以手动设置，时间格式为

  GMT

  格式

  Wdy, DD-Mon-YYYY HH:MM:SS GMT

  ，可以调用

  Date

  实例的

  toGMTString()

  方法转换，如果设置为过去的时间，该

  cookie

  被立刻删除
• 安全标志：为单词

  secure

  而非键值对，指定后，只有在

  SSL

  连接的时候才会被发送到服务器，也就是

  https

  协议

注意参数中只有名称和值才会被发送给服务器，其余的只是需要浏览器识别的命令式参数。

cookie

的接口设置非常的不人性化，往往需要我们对其操作进行封装才会方便使用。下面我们对其进行增删查改。

查看cookie：

decodeURIComponent(document.cookie);

添加或修改cookie：

[code]// 需要改成自己需要的cookie和域名、路径以及是否为https
document.cookie = 'encodeURIComponent(name)=encodeURIComponent(Leon); expries=' + (new Date(Date.now() + 24*60*60*1000)).toGMTString() + '; path=oss; domain=cdn.baidu.com; secure';

删除cookie: 

document.cookie = 'name=Leon; expires=' + (new Date(0)).toGMTString();

具体的封装的方式网上有很多，可以去搜一搜，核心就是对

cookie

进行字符串检索和切分，以及将传入的函数参数最终转换为字符串。

Storage

由于

cookie

的大小限制和需要全量传递给服务器，在很多场景下并不适用，所以

HTML5

规范中出现了

Storage

对象，包含

localStorage

和

sessionStorage

两种继承对象，属于

window

的属性。它提供了通常

5M

的大小空间来保存无需服务器交互的本地数据。

Storage

的常用方法：

• clear()

  : 清除所有值

• getItem(name)

  : 获取指定name的值

• key(index)

  : 获得对应索引值的键名

• removeItem(name)

  : 删除指定name的键值对

• setItem(name, value)

  : 为指定name设置对应的值

除了这些方法之外，

Storage

对象可以直接通过点语法或者方括号语法访问属性和操作属性，也可以通过

delete

关键字删除属性。该对象中的值均为字符串。

持久化数据

localStorage

通常保留到JS删除或者用户清除浏览器缓存。

会话数据

sessionStorage

保留到关闭浏览器。由于绑定会话窗口，所以不支持本地文件读写。另外在IE8中，该对象为异步读写，需要调用

begin()

和

commit()

方法保证成功读取，不再赘述。

对

Storage

对象做任何的新增，修改或者删除操作，都会触发

storage

事件。该事件只支持在与服务端通信时，一个页面修改，另一个页面会触发该事件。

[code]document.addEventListener('storage', function (e) {
console.log(e);
});

该事件对象的主要属性：

• domain

  : 发生变化的存储空间的域名

• key

  ：修改的键名

• newValue

  ：如果是设置值，则为新值；如果删除，则为

  null

• oldValue

  ：更改前的值

IndexedDB

拥有了

Storage

利器，已经能解决很多问题，但是通常

5M

的大小限制还是会限制一部分场景，比如后台管理系统的接口数据很容易突破

5M

，这个时候就需要我们的浏览器数据库

IndexedDB

了。其实在此之前，各家厂商主要推广的是

Web SQL Database

，不过后来被废弃了，虽然现在在部分平台上也能使用，但我们不做介绍了。

IndexedDB

数据库用于浏览器保存结构化数据，区别于传统数据库它保存的是对象，完全采用事务类型，所有的操作被转换为请求的方式，所以我们需要对每一步操作添加回调函数。

一个完整的实例为：

[code]// 判断能否正确打开数据库，避免多次检测
let dbOpened = false;
// 打开本地持久化数据库，默认版本为1
const request = indexedDB.open('jomocha');
// 当打开错误时
request.onerror = function(event){
console.error('打开本地持久化数据错误', event);
OSS.commonUI.showMsg('打开本地持久化数据库错误，试用功能，不影响使用，请联系zhaoshuaiqiang', 'error');
};
// 当数据库首次创建该版本时（首次创建或更新版本）
request.onupgradeneeded = function(event){
const db = event.target.result;
// 创建一个数据库存储对象，保存所有的维度项，分为name和list两个属性
const objectStore = db.createObjectStore('dimensions', {
keyPath: 'name'
});
// 定义存储对象的数据项属性
objectStore.createIndex('name', 'name', {
unique: true
});
};
// 成功打开了数据库
request.onsuccess = function(event){
dbOpened = true;
const db = event.target.result;
// 新建一个事务，包含oncomplete 和onerror句柄事件，缺省值为readonly，只读模式，可并行
const transaction = db.transaction(['dimensions']);
// 打开存储对象
const objectStore = transaction.objectStore('dimensions');
const request = objectStore.get('host');
request.onsuccess = function (event) {
// 第一次打开数据库时，肯定没有数据，所以需要检测
if (event.target.result) {
JomoCha.data = event.target.result.list;
}
};
}

数据库

当我们需要使用

IndexedDB

时，首先要调用

indexedDB.open()

方法打开数据库，如果该数据存在，则发起打开的请求，如果不存在，则发起创建并打开的请求。该方法会返回一个

IDBRequest

对象，可以在该对象上添加回调方法。具体的方法如示例中的最外层请求。

回调函数传入的事件属性

event.target

就指向该请求，即

request

。如果发生了错误，

event.target.errorCode

将会保存错误信息的错误码；如果成功，

event.target.result

就会保存一个数据库实例对象。

错误码列表（第二个开始省略前缀

IDBDatabaseException.

）：

• IDBDatabaseException.UNKNOWN_ERR(1)

  ：意外错误，无法归类

• NON_TRANSIENT_ERR(2)

  ：操作不合法

• NOT_FOUND_ERR(3)

  ：未发现要操作的数据库

• CONSTRAINT_ERR(4)

  ：违反了数据库约束

• DATA_ERR(5)

  ：提供给事务的数据不满足要求

• NOT_ALLOWED_ERR(6)

  ：操作不合法

• TRANSACTION_INACTIVE_ERR(7)

  ：试图重用已完成的事务

• ABORT_ERR(8)

  ：请求中断，未完成

• READ_ONLY_ERR(9)

  ：试图在只读模式下写入或修改数据

• TIMEOUT_ERR(10)

  ：在有效时间内未完成操作

• QUOTA_ERR(11)

  ：磁盘空间不足

对象存储空间（表）

成功打开数据库之后，我们就可以打开对象存储空间了，你可以把它理解成数据库中的表，用于保存不同的数据，如用户、交易、购物车等。下面的所有

db

代表成功回调中的数据库对象.

我们先调用

db.createObjectStore('dimensions', {keyPath:'name'});

来创建一张表，这个

dimensions

为唯一表名，其中的

keyPath

属性指定该表的键名，后面存储的所有数据都必须拥有该属性。

看下写入数据库的实例：

[code]// 每次同步更新最新数据
$.ajax({
url: '?r=tools/api/hosts',
success: function (data) {
// 如果能够打开本地数据库，则保存
if (dbOpened) {
const request = indexedDB.open('jomocha');
request.onsuccess = function(event){
const db = event.target.result;
// 新建一个事务，读写模式，不可并行
const transaction = db.transaction(['dimensions'], 'readwrite');
// 打开存储对象
const objectStore = transaction.objectStore('dimensions');
// 使用put方法，有则修改，没有则添加
const request = objectStore.put({
name: 'host',
list: data.data
});
}
}
}
});

这里写入数据库的对象里就包含了

name

参数。我们拿到数据使用

add()

或

put()

方法添加数据，这两种方法区别在于遇到相同的键名存在时，

add()

报错，

put()

修改原有值。这两种方法依然为请求，可以对其指定

onsuccess()

或

onerror()

事件处理回调，示例中省略了。

事务

在创建完成数据后，就可以对其进行查询了，

indexedDB

中所有读写操作都要通过事务，我们调用

db.transaction();

方法来打开所有存储空间（表），也可以传入参数来控制我们需要打开的表：

[code]// 打开一张表
db.transaction('user');
// 打开多张表
db.transaction(['user', 'dimensions']);

该方法还接受第二个参数作为访问方式，包含3种：

readonly

(缺省值)、

readwrite

、

versionchange

。最后一个比较特别，为在版本更新时使用，不可以与其他事务并发执行，允许任何操作，包括删除和创建索引。

现在通过事务我们已经确定了操作空间，接下来就可以获取具体的数据对象了，下面的

transaction

代表着上面的

db.transaction()

方法返回的事务。事务可以执行多个请求，本身也是一个请求，可以指定相应的

oncomplete()

和

onerror()

事件处理回调。其中的

oncomplete()

事件不能拿到该事务中请求的数据。

使用

transaction.objectStore('dimension');

获取数据对象，然后就可以通过

add/put/get/delete/clear

方法进行增删查改，均为请求，需要设置

onsuccess()

和

onerror()

回调。

游标遍历

我们可以使用

get()

方法检索出具体的单个对象，但是如果需要遍历，我们就要使用到游标查询了，也就是指定范围，然后遍历数据。下面的

objectStore

指代上面

transaction.objectStore()

返回的数据对象集。

[code]// 指定游标范围
const cursorRange = IDBKeyRange.bound('001', '100');
// 打开游标查询
const request = objectStore.openCursor(cursorRange);
request.onsuccess = function (event) {
const cursor = event.target.result;
// 必须检查cursor是否存在，如果该项存在，则为IDBCursor实例，否则为null
if (cursor) {
console.log(cursor.key + ': ' + cursor.value);
cursor.continue();
} else {
console.log('遍历完成');
}
}
request.onerror = function (event) {
console.error('游标区间获取失败');
}

在游标遍历时，具体的数据会保存在

event.target.result

里，如果该项存在，则会为一个

IDBCursor

对象实例，否则为

null

。实例的属性：

• direction

  ：数值，表示游标的方向，

  next/nextunique/prev/prevunique

  ，带有

  unique

  的会去重

• key

  ：数据对象键

• value

  ：数据对象值

• primaryKey

  ：游标当前的使用键值，后面会说

在遍历到游标中具体的每一项时，可以使用

update()

和

delete()

来修改，如果想要移动游标：

• continue(key)

  ：存在key移动到指定项，否则下一项

• advance(count)

  ：存在count移动指定项数，否则上一项

我们通过

IDBKeyRange

对象来控制键范围，有4种方式指定：

• only(key)

  ：只取得想要的键值对，等同于直接调用

  get(key)

• lowerBound(key, true)

  ：第一个元素为key，如果第二个参数为true，从该项的下一项开始，缺省值为false

• upperBound(key, true)

  ：最后一个元素为key，如果第二个参数为true，从该项的下一项开始，缺省值为false

• bound(lowerkey, upperkey, true, true)

  ：前两者的结合，1和3对应lower，2和4对应upper

openCursor()

方法接收的第一个参数为范围区间，如果为null，则默认全部范围；第二个参数为方向，为

next/nextunique/prev/prevunique

四个，带有

unique

的会去重

索引

可以使用

objectStore.createIndex('name', 'name', {unique: true});

来创建索引，分别为索引名，索引的属性名，该属性值是否唯一。调用

objectStore.delete('name');

来删除索引。删除索引不会影响数据，所以没有回调函数。

如果我们不想在主键上遍历游标或者获取数据，可以在数据集上取得新的索引列表：

[code]// 直接切换索引
const index = objectStore('dimensions');
// 在该索引上进行游标遍历
request = index.openCursor();

如果我们在非主键的游标中，想要去的主键值，调用

index.getKey('007');

并发问题

数据库操作存在并发问题，但由于是异步，我们不用担心，但是如果存在新版本变更还是会导致问题。所以打开数据库时指定

onversionchange()

处理事件，可以避免这个问题，在

setVesion()

时，如果触发

onerror()

代表已经打开了该数据库，无法现在更新版本，提示用户关闭其它网页，重新调用更新。

总结

如果需要与服务器实时交互，使用

cookie

，如果需要保存一些小信息字段，使用

localStorage

，如果只需要本次会话有效，使用

sessionStorage

，如果数据很大，使用

indexedDB

。使用什么技术跟业务场景匹配，但是技术还是都要了解都要会，毕竟，巧妇难为无米之炊。

参考资料

1. JavaScript高级程序设计 23章-离线应用与客户端存储
2. storage事件使用：https://www.cnblogs.com/incon...
3. IDBCursor对象：https://developer.mozilla.org...

阅读更多