前端存储方法对比之indexedDB

在项目开发过程中，前端一般都需要存储大量的数据。我们经常会用到cookie,localstorage等方法，但是这些都有存储长度限制。为了解决这个问题，我们今天给大家介绍一个新的存储方法indexedDB。

存储方法性能对比：

indexedDB 是一个浏览器端储存大量结构化数据的 API，是一个异步的 JavaScript API，用于在客户端存储和读取数据。

indexedDB用法介绍：

// 打开数据库
var openRequest = indexedDB.open("myDatabase", 1);

openRequest.onupgradeneeded = function() {
  var db = openRequest.result;
  if (!db.objectStoreNames.contains('myStore')) { // 如果还没有 myStore 对象仓库
    db.createObjectStore('myStore', {keyPath: 'id'}); // 创建一个叫 'myStore' 的新对象仓库，并指定主键为 'id'
  }
};

openRequest.onerror = function() {
  console.error("Error", openRequest.error);
};

openRequest.onsuccess = function() {
  var db = openRequest.result;
  // 获取对象仓库
  var store = db.transaction('myStore', 'readwrite').objectStore('myStore');

  // 添加数据
  var addRequest = store.put({id: 1, name: "小明", school: '清北'});

  addRequest.onerror = function() {
    console.error("Error", addRequest.error);
  };

  // 读取数据
  var getRequest = store.get(1);

  getRequest.onsuccess = function() {
    console.log(getRequest.result); // 输出：{id: 1, name: "小明", school: '清北'}
  };
};