indexDBInstance.html文件内容如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <script> var db; var arrayKey=[] var openRequest; var lastCursor; var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; function init() { //打开数据库 openRequest = indexedDB.open("messageIndexDB"); //只能在onupgradeneeded创建对象存储空间 openRequest.onupgradeneeded = function(e) { console.log("running onupgradeneeded"); var thisDb = e.target.result; if(!thisDb.objectStoreNames.contains("messageIndexDB")) { console.log("I need to create the objectstore"); /* *创建对象存储空间,第一个参数必须和打开数据库的第一个参数一致 *设置键名是id,并且可以自增. *autoIncrement默认是false,keyPath默认null */ var objectStore = thisDb.createObjectStore("messageIndexDB", { keyPath: "id", autoIncrement:true }); /* *创建索引 *第一个参数是索引名,第二个是属性名,第三个设置索引特性 */ objectStore.createIndex("name", "name", { unique: false }); } } openRequest.onsuccess = function(e) { //e.target.result返回一个数据库实例 db = e.target.result; db.onerror = function(event) { alert("数据库错误: " + event.target.errorCode); console.dir(event.target); }; if(db.objectStoreNames.contains("messageIndexDB")) { console.log("contains messageIndexDB"); //读写方式开启事务 var transaction = db.transaction(["messageIndexDB"],"readwrite"); transaction.oncomplete = function(event) { // console.log("All done!"); }; transaction.onerror = function(event) { // 错误处理 console.dir(event); }; //var content= document.querySelector("#content"); //得到messageIndexDB的objectStore对象 var objectStore = transaction.objectStore("messageIndexDB"); //游标查询 objectStore.openCursor().onsuccess = function(event) { //event.target.result获取存储空间的下一个对象 var cursor = event.target.result; var flag=0; //判断是否存在下一个对象,不存在是curson为null if (cursor) { console.log(cursor.key); //获取键 console.dir(cursor.value); //实际对象,一个Object实例 var msgList= document.querySelector("#messageList"); var msgDiv=document.createElement("div"); var msgTxt = document.createTextNode(cursor.value[flag]["name"]+"说:"+cursor.value[flag]["content"]); msgDiv.id=cursor.key; msgDiv.appendChild(msgTxt); msgList.appendChild(msgDiv); arrayKey.push(cursor.key); flag++; lastCursor=cursor.key; cursor.continue(); //将游标下移一项 } else { console.log("Done with cursor"); } }; //错误处理 objectStore.openCursor().onerror=function(event){ console.dir(event); }; } }; openRequest.onerror = function (event) { // 对request.error做一些需要的处理! console.log("your web may not support IndexedDB,please check."); }; //焦点处理 document.querySelector("#message").addEventListener("focus",function() { this.value = ""; }); document.querySelector("#name").addEventListener("focus",function() { this.value = ""; }); //添加数据 document.querySelector("#btn1").addEventListener("click", function() { var content=document.querySelector("#message").value; var name=document.querySelector("#name").value; /*var address=document.querySelector("#address").value;*/ var messageIndexDB=[{"name":name,"content":content}]; var transaction = db.transaction(["messageIndexDB"], "readwrite"); transaction.oncomplete = function(event) { // console.log("transaction complete"); }; transaction.onerror = function(event) { console.dir(event); }; //得到messageIndexDB的objectStore对象 var objectStore = transaction.objectStore("messageIndexDB"); objectStore.add(messageIndexDB); objectStore.openCursor().onsuccess = function(event) { cursor = event.target.result; var key; if(lastCursor==null) { key=cursor.key; lastCursor=key; } else { key=++lastCursor; } var msgList= document.querySelector("#messageList"); var msgDiv=document.createElement("div"); msgDiv.id=key; var msgTxt = document.createTextNode(name+"说:"+content); msgDiv.appendChild(msgTxt); msgList.appendChild(msgDiv); arrayKey.push(key); console.log("success add new record!key:"+key); console.dir(messageIndexDB); } }); //删除 document.querySelector("#delete").addEventListener("click", function() { if(arrayKey.length==0){ console.log("no data to delete!"); } else { var transaction = db.transaction(["messageIndexDB"], "readwrite"); transaction.oncomplete = function(event) { // console.log("transaction complete!"); }; transaction.onerror = function(event) { console.dir(event); }; //得到messageIndexDB的objectStore对象 var objectStore = transaction.objectStore("messageIndexDB"); var removeKey=arrayKey.shift(); //获取key var getRequest=objectStore.get(removeKey); getRequest.onsuccess=function(e) { var result =getRequest.result; console.dir(result); } //删除key var request=objectStore.delete(removeKey); request.onsuccess = function(e) { console.log("success delete record!"); }; request.onerror = function(e) { console.log("Error delete record:", e); }; //隐藏要删除的元素 document.getElementById(removeKey).style.display="none"; } }); } window.addEventListener("DOMContentLoaded", init, false); </script> <STYLE TYPE="text/css" MEDIA=screen> <!-- body{ font-size: 20px; -webkit-text-size-adjust:none; } --> </STYLE> </head> <body> <h1>简单留言板(js+IndexedDB数据库实现)</h1> <form> 昵称:<input id="name" type="text" name="name"><br> 内容:<textarea id="message" rows="3" cols="20"></textarea><br> <input id="btn1" type="button" value="提交留言" /> <input id="delete" type="button" value="删除留言" /> </form> <br> <p1>留言列表</p1> <div id="messageList"></div> </body> </html>
运行效果:
点击一次“删除留言”,重新打开浏览器,数据仍然存在,如下所示:
PS:
1.要注意一点的是,在创建对象存储空间的时候,必须在openRequest.onupgradeneeded 中创建,否则出错;
2.由于IndexedDB不能实现共享,所以每个客户端打开时IndexedDB保存的数据不一致。
相关推荐
但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库,webSQL基本上已经废弃了,具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据(也包括文件/二进制大型...
一个本地数据库(Web SQL IndexedDB)实现的通信录;介绍怎样创建打开数据库,创建表,添加数据,更新数据,删除数据,删除表 等等。
IndexedDB 基本使用
Ract + IndexedDB,Todo应用 建立 npm install --global纱线 纱线-版本 yarn global添加create-react-app npx create-react-app app1 npm安装 npm install react-router-dom-保存 npm install axios-保存 npm ...
前段时间项目需要本地存储聊天数据,使用到indexedDB,经查阅大量文章,终于完成。感觉网上indexedDB的文章不够多,也不够完善,因此把代码分享出来,帮助需要的小伙伴。
1. 安装npm包// use npmnpm install --save-dev indexeddb-promise// use yarnyarn add --dev indexeddb-promisescript引入IndexedDB 会被注册为一个全局变量。建议链接到一个可以手动更新的指定版本号:[removed]...
非常简单的indexedDB例子,自己按照书上面写的, 用的是 visual studio 2012 做的 mvc3 程序。
从IndexedDB导出并导入另一个IndexedDB的Javascript代码,以便导出所有“ Great Suspender”保存的会话,并将它们导入到另一个扩展的IndexedDB(如果兼容)中,或在先前版本的“ The Great Suspender”中导入 ...
一个超级简单小型的,基于promise采用IndexedDB的健值存储
html5 indexeddb 存储
用于管理您的客户端缓存,是IndexedDB微小封装支持版本控制和max age
浏览器端 indexed db 封装成更简洁易操作的接口, 数据库变化监控!
IndexedDB详细
安装npm install --save-dev fake-indexeddb 或者yarn add --dev fake-indexeddb用从功能上讲,它与IndexedDB完全一样,只是数据没有持久化到磁盘上。 最简单的使用方法是导入fake-indexeddb/auto ,这会将所有...
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/2178433
一个用于React的小型React式IndexedDB绑定。 npm i indexeddb-hooked初始化数据库您将React应用程序与IndexedDBProvider组件连接起来,并在config对象中定义您的模式。 import React from 'react' ;import { ...
lovefield 是建立在 IndexedDB 上的关系查询引擎。它提供了类似 SQL 的语法,并且可以跨浏览器工作(目前支持 Chrome 37 及以上版本,Firefox 31 及以上版本,IE 10 及以上版本)。示例代码:<!doctype html> <...
IndexedDB的纯JavaScript持久性实现。 什么在哪里讨论 文献资料 来源 问题 CI 承保范围: 执照: 麻省理工学院从NPM安装IndexedDB。 npm install indexeddb该README.md也是使用单元测试框架的单元测试。 我们将使用...
解压即用。解压即用。解压即用。解压即用。解压即用。解压即用。解压即用。
indexedDB跨平台框架 博文链接:https://appstores.iteye.com/blog/1950529