前端存储方法对比之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: '清北'}
  };
};

Dreamweaver不规则批量替换

Shell命令：宝塔如何在指定文件夹下面批量复制指定文件重新命名

VS Code如何用正则表达式批量替换

css3+html做一个简单的横向滚动文字效果

Nginx设置301定向跳转，重定跳到新的URL链接

标签： indexedDB, 前端存储方法

上面是“前端存储方法对比之indexedDB”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_5115.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！