从陌生到了解,花了一下午的时间,以下的地址还是不错的参考资料,省的到处去找

HTML5本地存储——IndexedDB(一:基本使用)

官方API接口文档

官方使用示例

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的更多相关文章

  1. html5 初试 indexedDB

    indexedDB是存储大量结构化数据的API,demo中用到的是异步API,麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’,只要熟悉了API操作起来也很简单. http://ww ...

  2. HTML5之IndexedDB使用详解

    随着firefox4正式版的推出,IndexedDB正式进入我们的视线.IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NOSQL数据库.相较之下,WebDataBase标 ...

  3. 使用 HTML5 的 IndexedDB API

    1. [代码]判断是否支持 IndexedDB     var indexedDB = window.indexedDB || window.webkitIndexedDB || window.moz ...

  4. IndexedDB参考资料网址

    IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...

  5. JavaScript的客户端存储

    一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...

  6. 浏览器相关--H5本地存储

    因为项目需要,最近研究了一下HTML5本地存储相关的东西,在这简单的记录一下. 浏览器存储主要包括一下几个部分1. cookie2. localStorage3. sessionStorage4. i ...

  7. HTML5存储之 indexedDB

    IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...

  8. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  9. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

随机推荐

  1. 201521123035《Java程序设计》第八周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 //泛型方法,打印MyStack的所有元素的薪水,不管MyStack中 ...

  2. 201521123010 《Java程序设计》第4周学习总结

    1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 这周上课主要学了继承,在打代码的时候对各个关键字(除了super关键字)的用法有一点混乱.对多 ...

  3. 201521123099 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...

  4. linux(CentOS5.8)环境下搭建Radius

    本文记录了freeRadius在CentOS5.8环境下的基本搭建过程,未涉及mysql的加入及配置 freeradius官方地址:http://freeradius.org/ 环境:CentOS5. ...

  5. PHOTOSHOP常用快捷键大全

    PHOTOSHOP常用快捷键大全一.文件新建 CTRL+N打开 CTRL+O 打开为 ALT+CTRL+O关闭 CTRL+W保存 CTRL+S 另存为 CTRL+SHIFT+S另存为网页格式 CTRL ...

  6. dynamics 365 AI 解决方案 —— 微软布局

    核心提示:微软在 Office365.Azure 云.Dynamics365 上进行人工智能技术的部署,野心不小. 微软在2016年9月宣布组建自己的 AI 研究小组.该小组汇集了超过 5000 名计 ...

  7. UIScollview 添加UICollectionView 实现放大缩小

    创建一个空的工程 打开storyboard,添加UIScollview 设置代理 实现代理方法 - (UIView *)viewForZoomingInScrollView:(UIScrollView ...

  8. SpringBoot文档翻译系列——29.SQL数据源

    原创作品,可以转载,但是请标注出处地址: 因为需要使用到这方面内容,所有对这一部分进行了翻译. 29  使用SQL数据源 SpringBoot为SQL数据源提供了广泛支持,从直接使用JdbcTempl ...

  9. 解决外部编辑器修改Eclipse文件延迟刷新【补充】

    在之前的文章,使用gulp解决外部编辑器修改Eclipse文件延迟刷新,原理是用gulp把更改过的项目文件直接复制一份到Tomcat的webapp.root下, 现在补充另外一种方法,双击Server ...

  10. vue语法之拼接字符串

    先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...