localForage:离线存储的革新版本

2019年8月31日 230次阅读 来源: zhangding

媒介

近来在看IDB，IDB是一种对象数据库存储体式格局，查询数据有游标法、事件法、索引法，运用的API许多，比较难记。

localForage是一个改良web-app离线数据存储的JavaScript库，中心在于运用一个和localStorage相似的API，比较简单好记。而且存储的数据范例不只是字符串，可所以数值、对象、布尔值、数组，然则undefined除外。默许情况下，顺次优先采纳运用IDB、WebSQL、localStorage举行背景存储。
运用localForage只需要在页面包括js文档即可，下载链接：
https://github.com/localForag…
该项目标详细GITHUB地点

API

1）setItem(key, value, successCallback)：建立一个键，参数是键名、键值、回调函数，回调函数的参数是对应的键值。

// Unlike localStorage, you can store non-strings.
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
    // This will output `1`.
    console.log(value[0]);
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

2）getItem(key, successCallback):猎取数据并运用回调函数

localforage.getItem('somekey', function(err, value) {
    // Run this code once the value has been
    // loaded from the offline store.
    console.log(value);
});

3）removeItem(key, successCallback)：移除对应的键

localforage.removeItem('somekey').then(function() {
    // Run this code once the key has been removed.
    console.log('Key is cleared!');
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

4）clear(successCallback)：消灭一切键。

localforage.clear().then(function() {
    // Run this code once the database has been entirely deleted.
    console.log('Database is now empty.');
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

5）length(successCallback)：取得离线存储的总的键数。

localforage.length().then(function(numberOfKeys) {
    // Outputs the length of the database.
    console.log(numberOfKeys);
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

6）key(keyIndex, successCallback)：依据键索引获得键值。
7）keys(successCallback)：获得一切的键索引。
8）iterate(iteratorCallback, successCallback)：对数据库中的每个键值对换用回调函数，回调函数的参数分别是键值、键索引、迭代次数（基于1）。

// The same code, but using ES6 Promises.
localforage.iterate(function(value, key, iterationNumber) {
    // Resulting key/value pair -- this callback
    // will be executed for every item in the
    // database.
    console.log([key, value]);
}).then(function() {
    console.log('Iteration has completed');
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

也许并不一定要迭代一切的键值对，此时只需返回一个非undefined范例值，就能够提前结束迭代，这个返回值会作为successCallback的参数。这个要领有点题目，返回的值不太对：

<!DOCTYPE html>
<html>
  <head>
    <title>Listing 2.1</title>
    <script type="text/javascript" src="https://raw.githubusercontent.com/mozilla/localForage/master/dist/localforage.min.js">       </script>

    <script type="text/javascript">
      localforage.setItem('array', [1, 2,'three']);
      localforage.setItem('string', 'people');
      localforage.setItem('number1', 5);
      localforage.setItem('number2', 6);
      localforage.iterate(function(value, key, iterationNumber) {
         if (iterationNumber < 2) {
                console.log([key, value]);
            } else {
                return [key, value];
            }
      }).then(function(result) {
          console.log('Iteration has completed at '+ result);
      }).catch(function(err) {
          console.log(err);
      });
    </script>
  </head>
  <body>
  </body>
</html>

前面提到，localForage在默许情况下会优先采纳运用IDB、WebSQL、localStorage举行背景存储，然则能够经由过程setDriver()举行背景设置，假如设置的机制在当前浏览器并不支撑，则照样根据默许挑选。
setDriver(driverName)/setDriver([driverName, nextDriverName]):设置背景支撑机制，参数是localforage.INDEXEDDB、localforage.WEBSQL、localforage.LOCALSTORAGE。

    原文作者：zhangding
    原文地址: https://segmentfault.com/a/1190000007338055
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞