浏览器大容量存储方案-IndexedDB简介

这是我参与更文挑战的第24天，活动详情查看： 更文挑战 !

👽 概论

近期做大屏的过程中，需要用到很多的地图GeoJson数据。这些数据总共有二十余兆，如果全部存储在前端自然不现实，将数据放在服务器每次又会因请求等待使项目整体感觉不那么流畅。除去设置HTTP缓存之外，IndexedDB就是最好的方案了。

👽 IndexedDB

🙋 兼容性

前端行事第一条，先来看看兼容性：

总体来看基本没什么问题（甚至略优于Grid的兼容性），所以就放心用好了。

🙋 一句话简介

不用把IndexedDB想得太复杂，只需把它看成是大号的localStroage就行，它内部也是使用对象的形式来存储数据。

🙋 基本使用

      //通过window对象的indexedDB属性，创建IDB实例
      let dataBase = window.indexedDB;

      //调用open方法创建或打开指定数据库实例
      //open方法至少接收一个参数：指定数据库的名称。
      //另外也可接收一个对象作为可选参数：
      //{vesion--数据库版本，storage--是否永久存储（'permanent'：永久（缺省值），'temporary'：临时）}
      let request = dataBase.open('myDB');

      //实例方法调用失败时执行：
      request.onerror = e => console.log('调用失败');
      //实例方法调用成功时执行：
      request.onsuccess = e => console.log('调用成功');

      let db = null;

      //实例升级时执行onupgradeneeded方法
      //此处定义表的基本结构
      request.onupgradeneeded = e => {
        db = event.target.result; //提取IDBobjectStore

        //createObjectStore方法用于创建一个存储空间（可以看做是一张表），接收两个参数：
        //第一个参数：存储空间名
        //第二个参数：{ 主键字段名、是否自增 }
        let objectStore = db.createObjectStore('myTable', { keyPath: 'id', autoIncrement: true });

        //createIndex用于创建表索引，接收三个参数：
        //第一个参数：索引名
        //第二个参数：索引在表中对应的名称
        //第三个参数：{ 是否唯一 }
        objectStore.createIndex('name', 'name', { unique: false });
      };
      
      //新增数据
      request.onsuccess = e => {
        db = event.target.result;

        //transaction方法用于创建事务，indexedDB的增删改查都在其中进行
        //transaction接收两个参数：
        //第一个参数：要操作的表名
        //第二个参数：操作权限:"readonly"只读、"readwrite"读写或"versionchange"版本变更
        let transaction = db.transaction(['myTable'], 'readwrite');

        //通过事务访问目标表
        let store = transaction.objectStore('myTable');

        store.add({ name: '老王', age: 49 });
        store.add({ name: '小王', age: 23 });
      };
      
       //删、改、查的使用这里就不多做介绍了，大家对照MDN就都懂啦！

👽 结语

加油打工人！