indexedDB 初体验

栏目: Html5 · 发布时间: 6年前

内容简介:背景:vue 项目打开 A 页面时 需要将 A 页面的表格数据 存到缓存中 为了使 B 页面 获取到 A           页面的表格数据一开始存放到 sessionstorage 里,但是由于空间有限 缓存存满了所以改用 indexedDB

背景:vue 项目打开 A 页面时 需要将 A 页面的表格数据 存到缓存中 为了使 B 页面 获取到 A           页面的表格数据

一开始存放到 sessionstorage 里,但是由于空间有限 缓存存满了

所以改用 indexedDB

关于 indexedDB 具体的介绍就不说了 可以自行百度

接下来介绍一下我所用到的几个基本方法~

实现如下:

1.首先要 open indexedDB ,然后记住 每个操作都是异步的 需要写在 onsuccess 方法里:

saveindexedDB (data, _case, _control) {
      let customerData = data
      let dbName = "deg"
      var request = indexedDB.open(dbName)
      request.onerror =  (e) => {}
      request.onupgradeneeded = (e) => {
        this.db = e.target.result
        var objectStore = this.db.createObjectStore("customers", {keyPath:'name', autoIncrement:true}) //  这里将 json 的 name 作为查询数据的 key
      }
      request.onsuccess = (e) => {
        console.log("success!");
        this.db = e.target.result
        this.updateDBvalue(data,_case, _control)
      }
      request.onerror = (e) => {
        console.log("error!");
      }
    },
复制代码

2.在这里我需要把表格数据存放到 customers 表里

因为每次打开 A 页面都会重新获取一下这个列表

所以

先判断一下数据库是否有这个表,有则修改,无则添加

updateDBvalue (data, _case, _control) {
      var tx = this.db.transaction('customers', 'readwrite');
      var store = tx.objectStore('customers');
      var req = store.get('deg' + _case + _control);
      req.onsuccess = (e) => {
          var degData = e.target.result;
          if (!degData) {
            store.add(data);
          } else {
            degData.value = data.value;
            store.put(degData);
          }
      }
    },
复制代码

3.那么 在 B 页面怎么 获取 到数据库里的列表 并进行下一步操作呢?

getdegList () {
      let _case = sessionStorage.getItem('_case')
      let _control = sessionStorage.getItem('_control')
      let dbName = "deg"
      var request = indexedDB.open(dbName)
      request.onerror =  (e) => {}
      request.onupgradeneeded = (e) => {
        this.db = e.target.result
        var objectStore = this.db.createObjectStore("customers", {keyPath:'name', autoIncrement:true})
      }
      request.onsuccess = (e) => {
        console.log("success!");
        this.db = e.target.result
        this.setDeg(_case, _control)
      }
      request.onerror = (e) => {
        console.log("error!");
      }
    },
    setDeg (_case, _control) {
      var tx = this.db.transaction('customers', 'readwrite')
      var store = tx.objectStore('customers')
      var req = store.get('deg' + _case + _control)  // 获取的就是 列表json 的 name key
      req.onsuccess = (e) => {
        this.deg = e.target.result.value
      }
    },
复制代码

ok~那么我们可以看到浏览器端 indexedDB 数据存放的情况啦!

indexedDB 初体验

ps:

如果想要 clear 表,方法如下:

clear () {
      var tx = this.db.transaction("customers","readwrite")
      var store = tx.objectStore("customers")
      store.clear()
    },
复制代码

参考链接

参考链接2


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从零到百亿

从零到百亿

〔美〕卡罗·白朗、Karel Baloun、卡罗·白朗 / 译言网 / 中国书籍出版社 / 2007 / 15.00元

Facebook是一个发源于哈佛大学、为全美大学生服务的社交网站。按照流量,这个网站在世界范围排名第8名;按照价值,业界对Facebook公司的估值超过10亿美元。Facebook创建于2004年2月,这样的高速增长成为当今互联网发展的一个奇迹。 《Inside Facebook》这本书是原作者卡罗·白朗(Karel Baloun)作为Facebook的第一位高级软件开发人员之一,在Face......一起来看看 《从零到百亿》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具