js操作indexedDB增删改查示例
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增删改查示例的更多相关文章
- springboot(十五):springboot+jpa+thymeleaf增删改查示例
这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...
- SQLAlchemy表操作和增删改查
一.SQLAlchemy介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数 ...
- SpringMVC之简单的增删改查示例(SSM整合)
本篇文章主要介绍了SpringMVC之简单的增删改查示例(SSM整合),这个例子是基于SpringMVC+Spring+Mybatis实现的.有兴趣的可以了解一下. 虽然已经在做关于SpringMVC ...
- (转)Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例
http://www.ityouknow.com/springboot/2017/09/23/spring-boot-jpa-thymeleaf-curd.html 这篇文章介绍如何使用 Jpa 和 ...
- Spring Boot + Jpa + Thymeleaf 增删改查示例
快速上手 配置文件 pom 包配置 pom 包里面添加 Jpa 和 Thymeleaf 的相关包引用 <dependency> <groupId>org.springframe ...
- Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例
Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例 一.快速上手 1,配置文件 (1)pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 ...
- spring boot(十五)spring boot+thymeleaf+jpa增删改查示例
快速上手 配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency> <groupId>org.springframework.b ...
- Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例
这篇文章介绍如何使用 Jpa 和 Thymeleaf 做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个 Demo 来试试它的效果,越 ...
- 使用python操作XML增删改查
使用python操作XML增删改查 什么是XML? XML 指可扩展标记语言(EXtensible Markup Language) XML 是一种标记语言,很类似 HTML XML 的设计宗旨是传输 ...
随机推荐
- LCS 的 NlogN作法
这个算法其实是因为LIS有NlogN的作法,把LCS转化为了LIS来做. 对于序列A{},B{},我们可以记录下来B中的每个元素在A中出现的位置,按顺序保存在一个新序列当中, 如果有多个位置按倒序写, ...
- Pro C/C++ 编程中值得注意的问题
1.宿主字符串存储Oracle自动补零问题. EXEC SQL BEGIN DECLARE SECTION; unsigned char liId[25]; EXEC SQL END DECLARE ...
- vue-cli 脚手架项目简介(一) - package.json
vue-cli是用来生成 vue项目的命令行工具,它的使用方法是这样的: vue init <template-name> <project-name>第二个参数 templa ...
- CentOS7 安装ifconfig
As we all know, “ifconfig” command is used to configure a network interfaces in GNU/Linux systems. I ...
- S5PV210启动过程详解1
内存: SRAM 静态内存 特点就是容量小.价格高.优点是不需要软件初始化直接上电就能用 DRAM 动态内存 特点就是容量大.价格低.缺点就是上电后不能直接使用,需要软件初始化后才可 ...
- forEach和map的区别
写法上没什么区别,只是返回值会不一样,map能够返回每一项,而forEach则返回undefined,以后要用哪个你知道了吧?map返回新的数组,可以进行后续更多的操作,例如: let arr = [ ...
- android代码设置EditText只输入数字、字母
如何设置EditText,使得只能输入数字或者某些字母呢? 一.设置EditText,只输入数字: 方法1:直接生成DigitsKeyListener对象就可以了. et_1.setKeyLis ...
- Arcgis for Js之featurelayer实现空间查询和属性查询
空间查询和属性查询是常用的两种对数据的检索与查询方式,在本节,将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式,先贴图给大家看看: 实现界面 属性查询 空间查询 看完 ...
- 类里边的构造函数可以被private修饰,在类的内部创建对象。利用这种特性创建单类模式
- HDU2032 杨辉三角
解题思路:不要小看这题水题,如果数据类型没有用long long, 当n开为35时,会出现TLE,而且会报非法内存访问,现在还 不理解为什么,若有高手,请不吝赐教. 上代码: #include< ...