前端数据库IndexedDB / 网络研习社#42

得益于村长 @ericet 的帮助，用SteemJS可以获取到作者的全部文章了！这些文章我先是存在Vuex中的，但是这样有个坏处，就是它是基于内存的，页面一关就什么也没有，又要重新从节点中获取数据。这个重获的过程耗时耗力，能不能直接存在本地呢，这样我每次要用的话直接读取本地的数据就行啰。

刚开始是用的localStorage来存的，好像不错，测试还蛮好的。不过，用我的帐号时则直接报错了！我大约有近千篇的文章，用localStorage是不够存的。上网查了下，localStorage大约只能存5M。好吧，换别的试试。

有个Web SQL有点印象，是做前端存储的。查了下，据说很多浏览器都不支持，都转向IndexedDB了。IndexedDB是很多浏览器都支持的，与现在的前端发展相连合，非常适用，那就它吧。

好吧，我承认又是挖了一个大坑！看手册也就一个页面，但真学起来折腾得不轻。中文的大部分资料都是相互拷贝的，看起来真让人头疼，因为作者也没有实现过，都是在罗列知识点，跑起来啥情况，不知道？！

又是研究了无数的资料，测试了无数的组合，终于是入了个门，能跑起来，能用了。真心不易啊！

先来个简单的数据库初始化看看：

数据库初始化

第一次打开数据库时，会先触发upgradeneeded事件，然后触发success事件。


initDatabase(){
  var that = this;
  var db = null;
  var openRequest;
  var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
  var dbName = 'mysteem';
  var tableName = 'posts';

  if (!indexedDB) {
    alert("你的浏览器不支持IndexedDB");
  };

  openRequest = indexedDB.open(dbName, 1); //创建或打开数据库

  //数据库创建或更新事件  创建或版本号升级时会触发，从而新建表
  openRequest.onupgradeneeded = function(event){
    console.log('数据库创建或更新');
    db = event.target.result;
    console.log(db.version, '数据库版本');
    if( !db.objectStoreNames.contains(tableName) ){ //判断表是否存在
      var objectstore = db.createObjectStore(tableName, {keyPath: 'id', autoIncrement: true}); //指定主键 id, 自增
      //新建表索引，IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）。
      objectstore.createIndex('title', 'title', {unique: false});
    }
  };

  //数据库打开成功(如果数据库已经存在)
  openRequest.onsuccess = function(event) {
    db = event.target.result;
    console.log(666, db, '版本号', db.version);
    db.onerror = function (event) {
      //针对此数据库的所有错误的通用错误处理程序
      alert("Database error:" + event.target.errorCode);
      console.dir(event.target);
    };
    that.db = db;  //挂载到全局中
  };

  //数据库打开错误
  openRequest.onerror = function(event){
    console.log(event, '数据库打开错误')
  };

},

单是这个数据库创建就折腾了快一天了，怎么试都不行，好在最后解决了。IndexedDB是由浏览器打开创建，相当轻量，而且几个浏览器（chrome, firefox, opera）我都试了下，都可以用！IndexedDB是基于事件驱动的，有点类拟小型的MongoDB。它不同于localStorage有容量的限制，理论上是可以存一些大数据的（至少几百M是有的）。在前端应用越加广泛的今天，IndexedDB的应用场景会更多的，比如我现在就特别想把文章都存在本地，不再想看steemit网站动不动就在那里转圈圈啊。

IndexedDB的优点是有无数多的！入门和应用也不难，你会点对象的概念就可以了，因为它是一个个对象存进去的，所以有很多先天的优势。不过，今天在使用查询的时候，用索引的方法好像没办法使用关键字来查询，不知是没有这个方法，还是我没有看到。

用IndexedDB来存数据真会让网站飞起来，尤其是对steemit! 好了，用起来吧。

This page is synchronized from the post: ‘前端数据库IndexedDB / 网络研习社#42’

# cn, indexeddb, network-institute, steemdev, steemjs

Catalogue

前端数据库IndexedDB / 网络研习社#42

数据库初始化

Your browser is out-of-date!