localforage.js是浏览器端本地数据持久化存储插件

localForage 是一个快速、简单的JavaScript库,可以改善在浏览器中存储键值对数据的方式。

它提供了一个简单的异步API来存储数据,但是在背后使用了多种不同的技术来实现数据的持久化。


最棒的是它利用了IndexedDB, WebSQL和localStorage,自动为你选择最好的可用技术。

支持ie8以上的现代浏览器,具体参考:https://github.com/localForage/localForage/wiki/Supported-Browsers-Platforms

localForage 的基本用法如下:

安装: 

npm

npm install localforage

cdn

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/localforage.min.js"></script>
<script>localforage.getItem('something', myCallback);</script>

基础API 使用:一旦安装,你可以在你的应用程序中如下使用它,使用之前需要config配置

localforage.config({
    driver      : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
    name        : 'myApp',
    version     : 1.0,
    size        : 4980736, // Size of database, in bytes. WebSQL-only for now.
    storeName   : 'keyvaluepairs', // Should be alphanumeric, with underscores.
    description : 'some description'
});

然后使用

   // 导入localForage库
   import localforage from 'localforage';

   // 存储数据
   localforage.setItem('key', 'value').then(function () {
       return localforage.getItem('key');
   }).then(function (value) {
       // 当数据被存储后的处理逻辑
       console.log(value);
   }).catch(function(err) {
       // 在出错时的处理逻辑
       console.error(err);
   });

   // 读取数据
   localforage.getItem('key').then(function(value) {
       // 当读取值成功的处理逻辑
       console.log(value);
   }).catch(function(err) {
       // 在出错时的处理逻辑
       console.error(err);
   });

   // 删除数据
   localforage.removeItem('key').then(function() {
       // 当删除值成功的处理逻辑
   }).catch(function(err) {
       // 在出错时的处理逻辑
       console.error(err);
   });

localForage 根据浏览器的能力来选择存储机制,它支持Promises, 也就是说你可以便捷的使用 async/await 与库结合来管理你的数据。

try {
    const value = await localforage.getItem('somekey');
    // This code runs once the value has been loaded
    // from the offline store.
    console.log(value);
} catch (err) {
    // This code runs if there were any errors.
    console.log(err);
}


立即下载localforage.min.js查看所有js插件

网友评论0

程序员在线工具箱