js操作indexedDB增删改查示例

if ('indexedDB' in window) {// 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本var req = indexedDB.open("TestDB", 1);req.onupgradeneeded = function(e) {var db = req.result;// var store = db.createObjectStore("student", {autoIncrement: true}); 使用自增键// 创建student表var store = db.createObjectStore("student", {keyPath: 'id'});// 设置id为主键store.createIndex('student_id_unqiue','id', {unique: true});}req.onsuccess = function(event) {var students = [{id: 1, name: '小叶', age: '11'},{id: 2, name: '小王', age: '12'},{id: 3, name: '小张', age: '13'}];var db = event.target.result;// var transaction = db.transaction('student', 'readwrite');var transaction = db.transaction(['student'], 'readwrite');transaction.onsuccess = function(event) {console.log('[Transaction] 好了!');};var studentsStore = transaction.objectStore('student');students.forEach(function(student){var db_op_req = studentsStore.add(student);db_op_req.onsuccess = function() {console.log("存好了");}});studentsStore.count().onsuccess = function(event) {console.log('学生个数', event.target.result);};// 获取id为1的学生studentsStore.get(1).onsuccess = function(event) {console.log('id为1的学生', event.target.result);};// 更新id为1的学生students[0].name = '小小叶';studentsStore.put(students[0]).onsuccess = function(event) {console.log('更新id为1的学生姓名', event.target.result);};// 删除id为2的学生studentsStore.delete(2).onsuccess = function(event) {console.log('id为2的学生已经删除');};}req.onerror = function() {console.log("数据库出错");}
}else{console.log('你的浏览器不支持IndexedDB');
}

转载于:https://www.cnblogs.com/ye-hcj/p/10353187.html

js操作indexedDB增删改查示例相关推荐

  1. mysql 中caption_Django-Model操作数据库(增删改查、连表结构)(示例代码)

    Django-Model操作数据库(增删改查.连表结构) 一.数据库操作 1.创建model表 基本结构 from django.db importmodelsclassuserinfo(models ...

  2. oracle将查询结果声明为伪表,Oracle查询操作(增删改查,伪表,高级查询)实例讲解...

    SQL查询操作:增删改查 一.SQL操作符 算术操作符 + - * / 比较操作符 = != < > <= >= BETWEEN--AND IN LINK IS NULL 逻辑 ...

  3. 一篇文章教会你创建vue项目和使用vue.js实现数据增删改查

    简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...

  4. (转)Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例

    http://www.ityouknow.com/springboot/2017/09/23/spring-boot-jpa-thymeleaf-curd.html 这篇文章介绍如何使用 Jpa 和 ...

  5. list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...

    简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...

  6. ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能

    ASP.NET Web--GridView 完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能 环境说明 系统要求:win7/10/11 开发语言:C# 开发工具:Visual Studio ...

  7. Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例

    <p>这篇文章介绍如何使用 Jpa 和 Thymeleaf 做一个增删改查的示例.</p> 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭 ...

  8. GridView的常用操作(增删改查)

    GridView的常用操作(增删改查) void BindData()         {             string sql = "select top 10 ID,jobno, ...

  9. python pymysql实例_Python使用pymysql模块操作mysql增删改查实例分析

    Python使用pymysql模块操作mysql增删改查实例分析 发布时间:2020-09-30 16:42:12 来源:脚本之家 阅读:92 本文实例讲述了Python使用pymysql模块操作My ...

最新文章

  1. 【学习生活杂谈】学习记录
  2. 【数据结构与算法】比较法分析查找算法与查找结构
  3. 2021了,不会还有测试人员认为Jmeter就等于性能测试吧!
  4. layui可以动态添加div吗_乳化剂是什么?可以添加到护肤品里吗?
  5. LeetCode 76. 最小覆盖子串 (滑动窗口哈希表)
  6. 链家程序员怒删 9TB 数据,被判 7 年!
  7. java判断字符串不为空_Java判断字符串是否为空的方法
  8. KETTLE使用通配符匹配多个文件输入到一张表中
  9. win10解除usb禁用_Win10系统禁用usb存储设备的设置方法
  10. 图像相似的算法有哪些,图像相似的算法是什么
  11. 移动端实现同时移动摇杆和摄像机旋转(双/多指触控)
  12. Java模拟醉汉行走问题_醉汉随机行走问题的统计学模型.pdf
  13. 第八章 VAR模型与脉冲响应
  14. 视觉Transformer综述
  15. baidumap vue 判断范围_vue--百度地图点覆盖和区域划分
  16. 学生成绩分等级 --if形式
  17. 如何在Linux系统上监测系统温度?(亲测可用)
  18. c# 导出excel 数字太长而显示为科学计数法的解决方法
  19. Stm32H7XX GCC下分散加载实现
  20. Google地图获取城市名称

热门文章

  1. Learn Python—表达式、数据类型、流程控制
  2. hpunix下11gRac的安装
  3. ES5-10 原型、原型链、闭包立即执行函数、插件开发
  4. 最新IP数据库 存储优化 查询性能优化 每秒解析上千万
  5. React进阶—性能优化
  6. X3D.Studio编辑器界面介绍
  7. Silverlight 2.5D RPG游戏技巧与特效处理:(七)动画特写
  8. SQLPLUS命令使用大全
  9. coco与voc相互转化
  10. linux多线程编程5--信号量(semaphore)