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 的设计宗旨是传输 ...
随机推荐
- 卸载MicrosoftBAF(删除C:\CommonFramework\instdata.dat)
发现有个可疑文件夹 C:\CommonFramework ,而且还会不停的删除创建 C:\CommonFramework\instdata.dat 最后被发现这是必应的一个框架程序在捣鬼,在微软论坛里 ...
- 探索Asp.net mvc 的文件上传
(转自:http://www.cnblogs.com/n-pei/archive/2010/10/15/1852635.html) 最近因为TeamVideo需要用到视频和图片上传功能,所以试着Goo ...
- DTO数据传输对象
如果有多个对象需要传输到页面上需要用DTO传输
- 原创:Scala学习笔记(不断更新)
Scala是一种函数式语言和面向对象语言结合的新语言,本笔记中就零散记下学习scala的一些心得,主要侧重函数式编程方面. 1. 以递归为核心控制结构. 实现循环处理的方式有三种:goto,for/w ...
- Chrome设置允许ajax跨域
最近在做一个前后端分离的项目,在Windows上用.Net WebApi时候的后端,在Mac上用ng2搭建的前端. 要实现前后端对接进行调试,就必须要解决ajax跨域的问题,实现方法如下: //在te ...
- Go语言使用匿名结构体解析JSON数据
手机拥有屏幕.电池.指纹识别等信息,将这些信息填充为 JSON 格式的数据.如果需要选择性地分离 JSON 中的数据则较为麻烦.Go 语言中的匿名结构体可以方便地完成这个操作. 首先给出完整的代码,然 ...
- linux(redhat) mysql 的安装
教程链接 注意 1.检查版本32/64位的时候 输入 name -a 输出为 Linux localhost.localdomain 2.6.18-53.el5 #1 SMP Wed Oct 10 1 ...
- 机器学习(九)—FP-growth算法
本来老师是想让我学Hadoop的,也装了Ubuntu,配置了Hadoop,一时间却不知从何学起,加之自己还是想先看点自己喜欢的算法,学习Hadoop也就暂且搁置了,不过还是想问一下园子里的朋友有什么学 ...
- 微博6月底升级后 报 10017/2/statuses/share.json或者10014/2/statuses/share.json错误
一,背景 2017-06-26微博公告替换了一些接口,导致以前的: statuses/repost 转发一条微博 statuses/update 发布一条微博 statuses/upload 上传图片 ...
- 常见26个jquery使用技巧详解
本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文 字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元 ...