LocalForage 教程

  1. Mozilla 开发的用于改善 web app 的离线体验的 JS 库
  2. 提供类似于 localStorage 的 API 同时支持 ES6 Promise API
  3. 支持存储多种类型的数据
  4. 支持所有现代的浏览器,在没有 IndexedDB 的浏览器使用 localStorage 存储

# 什么是 LocalForage

  1. Mozilla 开发的用于改善 web app 的离线体验的 JS 库
  2. 提供类似于 localStorage 的 API 同时支持 ES6 Promise API
  3. 支持存储多种类型的数据
  4. 支持所有现代的浏览器,在没有 IndexedDB 的浏览器使用 localStorage 存储

# IndexedDB

IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的API;key-value 数据库。

# 兼容性

2016.10 caniuse.com 的数据,基本所有浏览器都支持

# 容量限制

Firefox: 无限制,超过50MB 需请求
Chrome: 磁盘剩余容量的1/15,最大4GB

# 驱动优先级

  1. IndexedDB
  2. WebSQL
  3. localStorage

# 安装

<script src="localforage.js"></script>

# API

localforage.getItem('mykey').then((value) => {
  value === null; // key 不存在或存的是 undefined
});

localforage.setItem('mykey', 'myvalue').then((value) => {
  value === 'myvalue'; // myvalue 支持 string, number, array, object, binary
});

localforage.removeItem('mykey').then(() => {
  console.log('移除成功');
});

localforage.clear().then(() => {
  console.log('清空数据库');
});

localforage.length().then((len) => {
  console.log('key 数量: ', len);
});

localforage.key(0).then((keyName) => {
  console.log('第0个key: ', keyName);
});

localforage.keys().then((keys) => {
  console.log('所有key: ', keys);
});

localforage.iterate((value, key, iterationNumber) => {
  console.log([key, value]);
  if (iterationNumber === 10) {
    return [key, value]; // 提前退出
  }
}).then((result) => {
  console.log('Iteration has completed: ', result);
});

原文