HTML5本地存储IndexedDB基础介绍（-）-数据库的简单增删改查
//https://www.jianshu.com/p/4c74cbe60d83?_=1509695140
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="author" content="sina_mobile">
<meta name="format-detection" content="telephone=no" />
<title></title>
</head>
<body> <script> var myDB={
name:'univisity',
version:1,
db:null,
ojstore:{
name:'students',//存储空间表的名字
keypath:'id'//主键
}
}; var INDEXDB = {
indexedDB:window.indexedDB||window.webkitindexedDB,
IDBKeyRange:window.IDBKeyRange || window.webkitIDBKeyRange,//键范围
openDB:function(dbname,dbversion,callback){
//建立或打开数据库，建立对象存储空间(ObjectStore)
var self = this;
var version = dbversion || 1;
var request = self.indexedDB.open(dbname,version);
request.onerror = function(e){
console.log(e.currentTarget.error.message);
};
request.onsuccess = function(e){
myDB.db = e.target.result;
console.log('成功建立并打开数据库:'+myDB.name+' version'+dbversion);
};
request.onupgradeneeded=function(e){
var db=e.target.result,transaction= e.target.transaction,store;
if(!db.objectStoreNames.contains(myDB.ojstore.name)){
//没有该对象空间时创建该对象空间
store = db.createObjectStore(myDB.ojstore.name,{keyPath:myDB.ojstore.keypath});
console.log('成功建立对象存储空间：'+myDB.ojstore.name);
}
} },
deletedb:function(dbname){
//删除数据库
var self = this;
self.indexedDB.deleteDatabase(dbname);
console.log(dbname+'数据库已删除')
},
closeDB:function(db){
//关闭数据库
db.close();
console.log('数据库已关闭')
},
addData:function(db,storename,data){
//添加数据，重复添加会报错
var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
for(var i = 0 ; i < data.length;i++){
request = store.add(data[i]);
request.onerror = function(){
console.error('add添加数据库中已有该数据')
};
request.onsuccess = function(){
console.log('add添加数据已存入数据库')
};
} },
putData:function(db,storename,data){
//添加数据，重复添加会更新原有数据
var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
for(var i = 0 ; i < data.length;i++){
request = store.put(data[i]);
request.onerror = function(){
console.error('put添加数据库中已有该数据')
};
request.onsuccess = function(){
console.log('put添加数据已存入数据库')
};
}
},
getDataByKey:function(db,storename,key){
//根据存储空间的键找到对应数据
var store = db.transaction(storename,'readwrite').objectStore(storename);
var request = store.get(key);
request.onerror = function(){
console.error('getDataByKey error');
};
request.onsuccess = function(e){
var result = e.target.result;
console.log('查找数据成功')
console.log(result);
};
},
deleteData:function(db,storename,key){
//删除某一条记录
var store = store = db.transaction(storename,'readwrite').objectStore(storename);
store.delete(key)
console.log('已删除存储空间'+storename+'中'+key+'记录');
},
clearData:function(db,storename){
//删除存储空间全部记录
var store = db.transaction(storename,'readwrite').objectStore(storename);
store.clear();
console.log('已删除存储空间'+storename+'全部记录');
}
}
var students=[{
id:1001,
name:"Byron",
age:24
},{
id:1002,
name:"Frank",
age:30
},{
id:1003,
name:"Aaron",
age:26
}]; INDEXDB.openDB(myDB.name,myDB.version);
setTimeout(function(){
console.log('****************添加数据****************************');
INDEXDB.addData(myDB.db,myDB.ojstore.name,students);
// console.log('******************add重复添加**************************');
// INDEXDB.addData(myDB.db,myDB.ojstore.name,students);
// console.log('*******************put重复添加*************************');
// INDEXDB.putData(myDB.db,myDB.ojstore.name,students);
// console.log('*******************获取数据1001*************************');
// INDEXDB.getDataByKey(myDB.db,myDB.ojstore.name,1001);
// console.log('******************删除数据1001************');
// INDEXDB.deleteData(myDB.db,myDB.ojstore.name,1001);
// console.log('******************删除全部数据************');
// INDEXDB.clearData(myDB.db,myDB.ojstore.name);
// console.log('******************关闭数据库************');
// INDEXDB.closeDB(myDB.db);
// console.log('******************删除数据库************');
// INDEXDB.deletedb(myDB.name);
},800)
</script>
</body>
</html>
HTML5本地存储IndexedDB基础介绍（-）-数据库的简单增删改查的更多相关文章
- Vc数据库编程基础MySql数据库的表增删改查数据
Vc数据库编程基础MySql数据库的表增删改查数据 一丶表操作命令 1.查看表中所有数据 select * from 表名 2.为表中所有的字段添加数据 insert into 表名( 字段1,字段2 ...
- MongoDB 基础命令——数据库表的增删改查——遍历操作表中的记录
分组排序查询最大记录 //对 "catagory" 不等于 null 的数据进行分组查询,且查询结果倒序 db.getCollection('userAccount').aggre ...
- HTML5本地存储——IndexedDB（二：索引）
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- HTML5本地存储——IndexedDB
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——IndexedDB二：索引
HTML5本地存储——IndexedDB(二:索引) 在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...
- Android（java）学习笔记245：ContentProvider使用（银行数据库创建和增删改查的案例）
1. Android的四大组件: (1)Activity 用户交互的UI界面 (2)Service 后台运行的服务 (3)BroadcastReceiver 广播接收者 (4)ContentPro ...
- ado.net的简单数据库操作（三）——简单增删改查的实际应用
果然,在犯困的时候就该写写博客,写博客就不困了,哈哈! 上篇我记录了自己的SqlHelper的开发过程,今天记录一下如何使用这个sqlhelper书写一个具有简单增删改查的小实例啦. 实例描述:在数据 ...
- Hadoop基础-HDFS的API实现增删改查
Hadoop基础-HDFS的API实现增删改查 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客开发IDE使用的是Idea,如果没有安装Idea软件的可以去下载安装,如何安装 ...
- Android（java）学习笔记189：ContentProvider使用（银行数据库创建和增删改查的案例）
1. Android的四大组件: (1)Activity 用户交互的UI界面 (2)Service 后台运行的服务 (3)BroadcastReceiver 广播接收者 (4)ContentPro ...
- 十四：SpringBoot-配置MongoDB数据库，实现增删改查逻辑
SpringBoot-配置MongoDB数据库,实现增删改查逻辑 1.MongoDB数据库 1.1 MongoDB简介 1.2 MongoDB特点 2.SpringBoot整合MongoDB 2.1 ...
随机推荐
- 在MySQL中悲观锁及乐观锁的应用
本文由 ChatMoney团队出品 在数据库管理系统中,锁机制是保证数据一致性和并发控制的重要手段.MySQL,作为广泛使用的数据库系统之一,提供了多种锁策略来处理并发访问时可能引发的数据不一致性问题 ...
- 一些好用的IDEA插件
彩虹括号插件 Rainbow Brackets 可以让成对的括号展示相同颜色 Free Mybatis Tool插件 去看我另一篇文章:https://www.cnblogs.com/maomao77 ...
- 在SpringCloud中的相关报错
在SpringCloud中使用REST服务时 使用前需要先在配置类中注入RestTemplate的Bean 然后再使用 自动装配即可 @Autowired private RestTemplate r ...
- hot100之贪心
买卖股票的最佳时期(121) class Solution { public int maxProfit(int[] prices) { int res = 0; int min = Integer. ...
- HyperWorks使用六面体和三棱柱单元进行实体网格剖分
本节将演示如何使用 solid map 功能对一个复杂的几何实体进行网格剖分.剖分的思路是:首先对该实体进行适当的切割,以使其各个部分均处于 mappable 的状态:然后分别对各个子块进行 soli ...
- ArkUI-X通过Stage模型开发Android端应用指南(二)
StageApplication初始化支持以下三种方式 1. 通过继承StageApplication的方式进行初始化 import ohos.stage.ability.adapter.StageA ...
- 在centos7等旧版linux上用国内源下载源码编译安装gcc并配置环境变量
原文永久链接:https://forum.piwind.com/d/23-zai-centos7deng-jiu-ban-linuxshang-yong-guo-nei-yuan-xia-zai-yu ...
- Cursor再见！又一AI编程神器！简单两步，Augment无限续杯，爽用Claude 4！
1.Augment Code 介绍 Augment Code 是一款 AI 驱动的编程工具,基于 Anthropic 的 Claude Sonnet 4 模型构建,支持高达 20 万 token 的上 ...
- Windows 的桌面图标没有显示正确
Windows系统会缓存桌面图标,如果缓存文件损坏,可能会导致图标不显示.我们可以通过以下步骤重建图标缓存: 打开"任务管理器",结束"Windows资源管理器" ...
- Excel加载宏.xla文件的使用方法
将文件保存到本地的一个位置. 2.打开任意的excel表格,并按照如下的图片所示的步骤操作: 1)点击development(开发工具)add-ins浏览,然后找到刚刚文件的保存位置并选择文件(如果没 ...