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');
}

js操作indexedDB增删改查示例的更多相关文章

  1. springboot(十五):springboot+jpa+thymeleaf增删改查示例

    这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...

  2. SQLAlchemy表操作和增删改查

    一.SQLAlchemy介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数 ...

  3. SpringMVC之简单的增删改查示例(SSM整合)

    本篇文章主要介绍了SpringMVC之简单的增删改查示例(SSM整合),这个例子是基于SpringMVC+Spring+Mybatis实现的.有兴趣的可以了解一下. 虽然已经在做关于SpringMVC ...

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

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

  5. Spring Boot + Jpa + Thymeleaf 增删改查示例

    快速上手 配置文件 pom 包配置 pom 包里面添加 Jpa 和 Thymeleaf 的相关包引用 <dependency> <groupId>org.springframe ...

  6. Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例

    Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例 一.快速上手 1,配置文件 (1)pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 ...

  7. spring boot(十五)spring boot+thymeleaf+jpa增删改查示例

    快速上手 配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency> <groupId>org.springframework.b ...

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

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

  9. 使用python操作XML增删改查

    使用python操作XML增删改查 什么是XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输 ...

随机推荐

  1. LCS 的 NlogN作法

    这个算法其实是因为LIS有NlogN的作法,把LCS转化为了LIS来做. 对于序列A{},B{},我们可以记录下来B中的每个元素在A中出现的位置,按顺序保存在一个新序列当中, 如果有多个位置按倒序写, ...

  2. Pro C/C++ 编程中值得注意的问题

    1.宿主字符串存储Oracle自动补零问题. EXEC SQL BEGIN DECLARE SECTION; unsigned char liId[25]; EXEC SQL END DECLARE ...

  3. vue-cli 脚手架项目简介(一) - package.json

    vue-cli是用来生成 vue项目的命令行工具,它的使用方法是这样的: vue init <template-name> <project-name>第二个参数 templa ...

  4. CentOS7 安装ifconfig

    As we all know, “ifconfig” command is used to configure a network interfaces in GNU/Linux systems. I ...

  5. S5PV210启动过程详解1

    内存: SRAM  静态内存     特点就是容量小.价格高.优点是不需要软件初始化直接上电就能用 DRAM  动态内存    特点就是容量大.价格低.缺点就是上电后不能直接使用,需要软件初始化后才可 ...

  6. forEach和map的区别

    写法上没什么区别,只是返回值会不一样,map能够返回每一项,而forEach则返回undefined,以后要用哪个你知道了吧?map返回新的数组,可以进行后续更多的操作,例如: let arr = [ ...

  7. android代码设置EditText只输入数字、字母

     如何设置EditText,使得只能输入数字或者某些字母呢? 一.设置EditText,只输入数字: 方法1:直接生成DigitsKeyListener对象就可以了. et_1.setKeyLis ...

  8. Arcgis for Js之featurelayer实现空间查询和属性查询

    空间查询和属性查询是常用的两种对数据的检索与查询方式,在本节,将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式,先贴图给大家看看: 实现界面 属性查询 空间查询 看完 ...

  9. 类里边的构造函数可以被private修饰,在类的内部创建对象。利用这种特性创建单类模式

  10. HDU2032 杨辉三角

    解题思路:不要小看这题水题,如果数据类型没有用long long, 当n开为35时,会出现TLE,而且会报非法内存访问,现在还 不理解为什么,若有高手,请不吝赐教. 上代码: #include< ...