html5 初试 indexedDB(推荐)
发布时间:2016-07-21 10:00:03 作者:佚名 我要评论
下面小编就为大家带来一篇html5 初试 indexedDB(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
indexedDB是存储大量结构化数据的API,demo中用到的是异步API,麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’,只要熟悉了API操作起来也很简单。
大体流程是这样
1.打开数据库
JavaScript Code复制内容到剪贴板
- var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
- if ('webkitIndexedDB' in window) {
- window.IDBTransaction = window.webkitIDBTransaction;
- window.IDBKeyRange = window.webkitIDBKeyRange;
- }
- //这个就不解释了
- var request = indexedDB.open("adsageIDB"); //open : indexedDB只有这一个方法 打开(数据库名)
- request.onsuccess = function(e) { //异步
- var v = "1.00";
- var db = e.target.result;
- if (v!= db.version) {
- var setVrequest = db.setVersion(v);
- setVrequest.onsuccess = function(e) { //异步
- if(db.objectStoreNames.contains("todo")) {
- db.deleteObjectStore("todo");
- }
- var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore 暂时用到两个参数,数据库&&主键
- }
- }
- }
这样就 创建/连接 了一个数据库
2.创建交互对象 && 监听dom事件 && 处理数据
然后就是要操作数据库了
JavaScript Code复制内容到剪贴板
- //插入数据 暂时只插入一列
- var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction
- var store = trans.objectStore("todo");//创建Store
- //要操作数据必须建立transaction 和 Store
- var data = {
- "text": todoText,
- "adsid": new Date().getTime()
- };//一个小数据 adsid是主键
- var request = store.put(data); //‘强行’插入
- request.onsuccess = function(e) {
- //成功后执行一些操作
- };
- request.onerror = function(e) {
- console.log("Error Adding: ", e);
- };
JavaScript Code复制内容到剪贴板
- //读取数据
- var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
- var store = trans.objectStore("todo");
- var keyRange = IDBKeyRange.lowerBound(0);
- var cursorRequest = store.openCursor(keyRange);
- //这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数
- //另一种方法是get() 这个就比较简单了直接store.get('键值')就行
- cursorRequest.onsuccess = function(e) {
- var result = e.target.result;
- if(!!result == false)
- return;
- console.log(result.value);
- result.continue(); //循环读取所有数据
- };
JavaScript Code复制内容到剪贴板
- //删除数据
- ...
- store.delete('键值')
- ...
出了一个小demo
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- var indexedDB = window.indexedDB || window.webkitIndexedDB ||
- window.mozIndexedDB;
- if ('webkitIndexedDB' in window) {
- windowwindow.IDBTransaction = window.webkitIDBTransaction;
- windowwindow.IDBKeyRange = window.webkitIDBKeyRange;
- }
- adsageIDB = {};
- adsageIDB.db = null;
- adsageIDB.onerror = function(e) {
- console.log(e);
- };
- adsageIDB.open = function() {
- var request = indexedDB.open("adsageIDB");
- request.onsuccess = function(e) {
- var v = "1.00";
- adsageIDB.db = e.target.result;
- var db = adsageIDB.db;
- if (v!= db.version) {
- var setVrequest = db.setVersion(v);
- setVrequest.onerror = adsageIDB.onerror;
- setVrequest.onsuccess = function(e) {
- if(db.objectStoreNames.contains("todo")) {
- db.deleteObjectStore("todo");
- }
- var store = db.createObjectStore("todo",
- {keyPath: "adsid"});
- adsageIDB.getAllTodoItems();
- };
- }
- else {
- adsageIDB.getAllTodoItems();
- }
- };
- request.onerror = adsageIDB.onerror;
- }
- adsageIDB.addTodo = function(todoText) {
- var db = adsageIDB.db;
- var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
- var store = trans.objectStore("todo");
- var data = {
- "text": todoText,
- "adsid": new Date().getTime()
- };
- var request = store.put(data);
- request.onsuccess = function(e) {
- adsageIDB.getAllTodoItems();
- };
- request.onerror = function(e) {
- console.log("Error Adding: ", e);
- };
- };
- adsageIDB.deleteTodo = function(id) {
- var db = adsageIDB.db;
- var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
- var store = trans.objectStore("todo");
- var request = store.delete(id);
- request.onsuccess = function(e) {
- adsageIDB.getAllTodoItems();
- };
- request.onerror = function(e) {
- console.log("Error Adding: ", e);
- };
- };
- adsageIDB.getAllTodoItems = function() {
- var todos = document.getElementById("todoItems");
- todos.innerHTML = "";
- var db = adsageIDB.db;
- var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
- var store = trans.objectStore("todo");
- var keyRange = IDBKeyRange.lowerBound(0);
- var cursorRequest = store.openCursor(keyRange);
- cursorRequest.onsuccess = function(e) {
- var result = e.target.result;
- if(!!result == false)
- return;
- renderTodo(result.value);
- result.continue();
- };
- cursorRequest.onerror = adsageIDB.onerror;
- };
- function renderTodo(row) {
- var todos = document.getElementById("todoItems");
- var li = document.createElement("li");
- var a = document.createElement("a");
- var t = document.createTextNode(row.text);
- a.addEventListener("click", function() {
- adsageIDB.deleteTodo(row.adsid);
- }, false);
- a.textContent = " [删除]";
- li.appendChild(t);
- li.appendChild(a);
- todos.appendChild(li)
- }
- function addTodo() {
- var todo = document.getElementById("todo");
- adsageIDB.addTodo(todo.value);
- todo.value = "";
- }
- function init() {
- adsageIDB.open();
- }
- window.addEventListener("DOMContentLoaded", init, false);
- </script>
- </head>
- <body>
- <ul id="todoItems"></ul>
- <input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />
- <input type="submit" value="增加一个 IDB" onclick="addTodo(); return false;"/>
- </body>
- </html>
以上这篇html5 初试 indexedDB(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持程序员之家。
原文地址:http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html
相关文章
- 我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储。感兴趣的朋友一起学习吧2017-06-16
- html5的两种存储技术的最大区别就是生命周期,接下来通过本文给大家分享HTML5 LocalStorage 本地存储刷新值还在问题以及使用方法小结,需要的的朋友参考下本文吧2017-03-10
- 本篇文章主要介绍了HTML5 LocalStorage 本地存储 ,HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。有兴趣的可以了解2016-12-23
- 这篇文章主要介绍了html5本地存储 localStorage操作使用详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-09-20
- 这篇文章主要介绍了Html5 web本地存储实例详解的相关资料,需要的朋友可以参考下2016-07-28
- 这篇文章主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料,Web Storage如何用JSON存储多个数据,感兴趣的小伙伴们可以参考一下2016-07-04
- 本篇文章主要介绍了HTML5中indexedDB 数据库的使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-05-11
- 这篇文章主要介绍了深入解析HTML5中的IndexedDB索引数据库,包括事务锁等基本功能的相关使用示例,需要的朋友可以参考下2015-09-14
- IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。下面通过本文重点给大家介绍HTML5本地存储之IndexedDB的相关知识,感兴趣的朋友一起看看吧2017-06-16
最新评论