前端存储方法对比之indexedDB-前端开发

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

存储方法性能对比：

特性	cookie	localStorage	sessionStorage	indexedDB
数据生命周期	一般由服务器生成，可以设置过期时间；前端采用和js-cookie等组件也可以生成	除非被清理，否则一直存在；浏览器关闭还会保存在本地，但是不支持跨浏览器	页面关闭就清理刷新依然存在，不支持跨页面交互	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	不限制大小
与服务端通信	每次都会携带在请求的header 中，对于请求性能有影响；同时由于请求中都带有，所以也容易出现安全问题	不参与	不参与	不参与
特点	字符串键值对在本地存储数据	字符串键值对在本地存储数据	字符串键值对在本地存储数据	IndexedDB 是一个非关系型数据库（不支持通过 SQL 语句操作）。可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案无法提供的能力。

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: '清北'}
  };
};

以上是编程学习网小编为您介绍的“前端存储方法对比之indexedDB”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。