localforage，好用的indexedDB插件,可以本地存储大数据

最新推荐文章于 2025-03-11 08:42:24 发布

有玉微凉，是为樱琅

最新推荐文章于 2025-03-11 08:42:24 发布

阅读量1k

点赞数

分类专栏： html 文章标签： javascript 前端 vue.js indexeddb localforage

本文链接：https://blog.csdn.net/Sakura1998gis/article/details/130761899

版权

html 专栏收录该内容

17 篇文章

订阅专栏

文章介绍了如何使用localforage这一库来简化对indexedDB的复杂API操作，它提供了一种更简洁的接口，类似于localStorage和sessionStorage。当需要存储超过4MB的大数据，如3D数据、geojson或图片时，localforage是一个理想选择。通过示例展示了利用localforage进行数据读取和存储的promise语法，以提高页面加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

indexedDB的api地址

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB

localforage中文网

https://localforage.docschina.org/

原生的indexedDB的api还是比较复杂的，localforage重新封装了一下indexedDB，使用起来更加简洁，如果有用过localstorage和sessionstorage的同学，这个用法是差不多的

不过localstorage和sessionstorage最多只能存储4M的数据，如果有大型的3D数据，或者大量的geojson数据，图片数据什么的，可以存储在localforage里面，理论上这个本地数据库的内存是和自己电脑磁盘有关系的，可以放很多数据。

就不需要每次打开页面都请求这个大数据了，第一次打开页面请求一下，然后存到localforage里面，以后再次打开就先判断localforage里面有没有，有的话，直接拿这里面的，没有的话再请求数据，可以节省大量的请求时间。

使用起来也很方便

# 通过 npm 安装：
npm install localforage


import localforage from 'localforage'

然后使用的时候有回调和promise两种写法，我这里展示一下promise的写法，和localstorage、sessionstorage用法是一样的，就是后面加上了一个.then 和.catch

      localforage.getItem('gridGeojson').then(function(value) {
          if(value){
            self.gridGeojson = value
            self.fullScreenLoading.close()
          }else{
            self.$axios({
                  url:geoserverUrl+geoserverGeojsonHeader+'result'+geoserverGeojsonEnd,
                  cache: false,
                  async: true,
            }).then(res=>{
              localforage.setItem('gridGeojson', res.data).then(function (value) {
                self.gridGeojson = value
              }).catch(function(err) {
                  console.log(err);
              });
              self.fullScreenLoading.close()
            });
          }
      }).catch(function(err) {
          // 当出错时，此处代码运行
          console.log(err);
      });