HTML5之indexedDB
从陌生到了解,花了一下午的时间,以下的地址还是不错的参考资料,省的到处去找
给一个自己练习的DEMO
var dbName = "myDB";
var tdbName = "student";
function openDB(dbname,version){
version = version || 1; var request = getIndexedDB().open([dbName],version);
request.onerror=function(e){
console.log("打开数据库失败");
}
request.onsuccess=function(e){
console.log("打开数据库成功");
db = e.target.result;
}
request.onupgradeneeded=function(e){
db = e.target.result;
if(!db.objectStoreNames.contains('student')){
db.createObjectStore(['student'],{keyPath:"name"});
console.log("创建表student");
}
}
}
function writeInDB(dbName,tdbName,objValue){
var transaction = dbName.transaction(tdbName,"readwrite");
var objectStore = transaction.objectStore(tdbName);
var addrequest;
for(var i in objValue){
addrequest = objectStore.add(objValue[i]);
}
addrequest.onerror=function(e){
console.log("插入数据失败");
}
addrequest.onsuccess=function(e){
console.log("插入数据成功");
}
}
var db = openDB(dbName);
var stud = [{name:'Li',age:20},{name:'Zhao',age:12}]; function readFromDB(db,tdbName){
var store = db.transaction(tdbName,"readwrite").objectStore(tdbName);
store.openCursor().onsuccess=function(e){
var cursor = e.target.result;
if(cursor){
console.log(cursor.key);
console.log(cursor.value);
cursor.continue();
}
}
} function removeFromDB(db,tdbName,key){
var store = db.transaction(tdbName,"readwrite").objectStore(tdbName);
store.delete(key);
}
readFromDB(db,tdbName);//读取数据
removeFromDB(db,tdbName,'Li');//移出key为"Li"的数据
writeInDB(db,tdbName,[{name:"Li",age:22,sex:1}]);
writeInDB(db,tdbName,[{name:"Lilly",age:22,sex:1}]);//插入两条记录
HTML5之indexedDB的更多相关文章
- html5 初试 indexedDB
indexedDB是存储大量结构化数据的API,demo中用到的是异步API,麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’,只要熟悉了API操作起来也很简单. http://ww ...
- HTML5之IndexedDB使用详解
随着firefox4正式版的推出,IndexedDB正式进入我们的视线.IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NOSQL数据库.相较之下,WebDataBase标 ...
- 使用 HTML5 的 IndexedDB API
1. [代码]判断是否支持 IndexedDB var indexedDB = window.indexedDB || window.webkitIndexedDB || window.moz ...
- IndexedDB参考资料网址
IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...
- JavaScript的客户端存储
一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...
- 浏览器相关--H5本地存储
因为项目需要,最近研究了一下HTML5本地存储相关的东西,在这简单的记录一下. 浏览器存储主要包括一下几个部分1. cookie2. localStorage3. sessionStorage4. i ...
- HTML5存储之 indexedDB
IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
随机推荐
- 201521123035《Java程序设计》第八周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 //泛型方法,打印MyStack的所有元素的薪水,不管MyStack中 ...
- 201521123057 《Java程序设计》第2周学习总结
1. 本章学习总结 本周Java教学主要围绕Java的基本语法展开.在本周的学习中,我了解到了: -Integer的取值范围 -if...else条件式,switch条件式,while循环,break ...
- Java课程设计——计算器团队博客
1.团队名称.团队成员介绍(需要有照片) 1.1团队名称 707 1.2团队成员介绍 谢元将:组长 罗登宇:组员 王华俊:组员 2. 项目git地址 谢元将 罗登宇 王华俊 3. 项目git提交记录截 ...
- 201521123113《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...
- 浏览器缓存机制<转>
转这篇文章是感觉可以在图片加载的时候,也使用这样的缓存策略 作者:吴秦出处:http://www.cnblogs.com/skynet/本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或 ...
- iOS开发者的管理工具-CocoaPods安装
1. 安装 Ruby 对于iOS开发者,CocoaPods是最方便使用的第三方管理工具了,但是怎么安装CocoaPods呢,安装CocoaPods之前,要确保mac已经安装上Ruby,但在安装Ruby ...
- 一张图告诉你移动Web前端所有技术(工程化、预编译、自动化)
你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML5.CSS 3.JavaScript ...
- NameError: name 'messagebox' is not defined 错误处理
写了段代码,想在按下button的时候跳个提示框出来,调试的时候提示了messagebox未定义 from tkinter import * def test_show(): messagebox.s ...
- Azure Powershell使用已有Image创建ARM非托管磁盘虚拟机
生成Image映像文件,记录好Image的URL(下面URL为测试URL,具体请参考实际):ImageURL:https://hlmrgstoragen.blob.core.chinacloudapi ...