当前位置: 首页 > 工具软件 > localForage > 使用案例 >

localForage-改进的离线存储

池宸
2023-12-01

1.什么是localForage

localForage 是一个 JavaScript 库,通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据,而不仅仅是字符串。

localForage 有一个优雅降级策略,若浏览器不支持 IndexedDB 或 WebSQL,则使用 localStorage。在所有主流浏览器中都可用:Chrome,Firefox,IE 和 Safari(包括 Safari Mobile)。

localForage 提供回调 API 同时也支持 ES6 Promises API,你可以自行选择。

2.安装使用localForage

使用 localForage,请 下载最新版本 或使用 npmnpm install localforage)或 bowerbower install localforage)进行安装。

然后,只需包含 JS 文件即可使用 localForage:<script src="localforage.js"></script>。你不需要运行任何初始化方法或等待 onready 事件。

# 通过 npm 安装:
npm install localforage

# 或通过 bower:
bower install localforage
<script src="localforage.js"></script>
<script>console.log('localforage is: ', localforage);</script>

3.localForage的使用

GETITEM

localforage.getItem('somekey').then(function(value) {
    // 当离线仓库中的值被载入时,此处代码运行
    console.log(value);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

// 回调版本:
localforage.getItem('somekey', function(err, value) {
    // 当离线仓库中的值被载入时,此处代码运行
    console.log(value);
});

getItem(key, successCallback)

从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在,getItem() 将返回 null

 当存储 undefined 时, getItem() 也会返回 null。由于 localStorage 限制,同时出于兼容性的原因 localForage 无法存储 undefined

SETITEM

localforage.setItem('somekey', 'some value').then(function (value) {
    // 当值被存储后,可执行其他操作
    console.log(value);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

// 不同于 localStorage,你可以存储非字符串类型
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
    // 如下输出 `1`
    console.log(value[0]);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

// 你甚至可以存储 AJAX 响应返回的二进制数据
req = new XMLHttpRequest();
req.open('GET', '/photo.jpg', true);
req.responseType = 'arraybuffer';

req.addEventListener('readystatechange', function() {
    if (req.readyState === 4) { // readyState 完成
        localforage.setItem('photo', req.response).then(function(image) {
            // 如下为一个合法的 <img> 标签的 blob URI
            var blob = new Blob([image]);
            var imageURI = window.URL.createObjectURL(blob);
        }).catch(function(err) {
          // 当出错时,此处代码运行
          console.log(err);
        });
    }
});

setItem(key, value, successCallback)

将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象:

  • Array
  • ArrayBuffer
  • Blob
  • Float32Array
  • Float64Array
  • Int8Array
  • Int16Array
  • Int32Array
  • Number
  • Object
  • Uint8Array
  • Uint8ClampedArray
  • Uint16Array
  • Uint32Array
  • String

 当使用 localStorage 和 WebSQL 作为后端时,二进制数据在保存(和检索)之前会被序列化。在保存二进制数据时,序列化会导致大小增大。

示例

REMOVEITEM

localforage.removeItem('somekey').then(function() {
    // 当值被移除后,此处代码运行
    console.log('Key is cleared!');
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

removeItem(key, successCallback)

从离线仓库中删除 key 对应的值。

示例

CLEAR

localforage.clear().then(function() {
    // 当数据库被全部删除后,此处代码运行
    console.log('Database is now empty.');
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

clear(successCallback)

从数据库中删除所有的 key,重置数据库。

localforage.clear() 将会删除离线仓库中的所有值。谨慎使用此方法。

LENGTH

localforage.length().then(function(numberOfKeys) {
    // 输出数据库的大小
    console.log(numberOfKeys);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

length(successCallback)

获取离线仓库中的 key 的数量(即数据仓库的“长度”)。

KEY

localforage.key(2).then(function(keyName) {
    // key 名
    console.log(keyName);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

key(keyIndex, successCallback)

根据 key 的索引获取其名

 虽然是从 localStorage API 延续而来的,但此方法被认为有点怪异。

KEYS

localforage.keys().then(function(keys) {
    // 包含所有 key 名的数组
    console.log(keys);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

keys(successCallback)

获取数据仓库中所有的 key。

ITERATE

// 同样的代码,但使用 ES6 Promises
localforage.iterate(function(value, key, iterationNumber) {
    // 此回调函数将对所有 key/value 键值对运行
    console.log([key, value]);
}).then(function() {
    console.log('Iteration has completed');
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

// 提前退出迭代:
localforage.iterate(function(value, key, iterationNumber) {
    if (iterationNumber < 3) {
        console.log([key, value]);
    } else {
        return [key, value];
    }
}).then(function(result) {
    console.log('Iteration has completed, last iterated pair:');
    console.log(result);
}).catch(function(err) {
    // 当出错时,此处代码运行
    console.log(err);
});

iterate(iteratorCallback, successCallback)

迭代数据仓库中的所有 value/key 键值对。

iteratorCallback 在每一个键值对上都会调用一次,其参数如下: 1. value 为值 2. key 为键名 3. iterationNumber 为迭代索引 - 数字

 通过在 iteratorCallback 回调函数中返回一个非 undefined 的值,能提前退出 iterateiteratorCallback 的返回值即作为整个迭代的结果,将被传入 successCallback

这意味着如果你使用的是 CoffeeScript,那么你需要手动执行一个不带内容的 return 语句才能继续迭代所有的 key/value 键值对。

 类似资料: