indexDBPersonDemo.html
<!DOCTYPE html>
<html>
<head>
<script>
//https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB
var db;
var arrayKey=[]
var openRequest;
var lastCursor;
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
function init() {
openRequest = indexedDB.open("persons");
//handle setup
openRequest.onupgradeneeded = function(e)
{
console.log("running onupgradeneeded");
var thisDb = e.target.result;
if(!thisDb.objectStoreNames.contains("person"))
{
console.log("I need to create the objectstore");
var objectStore = thisDb.createObjectStore("person", { keyPath: "id", autoIncrement:true });
objectStore.createIndex("name", "name", { unique: false });
}
}
openRequest.onsuccess = function(e)
{
db = e.target.result;
db.onerror = function(event)
{
// Generic error handler for all errors targeted at this database's
alert("Database error: " + event.target.errorCode);
console.dir(event.target);
};
if(db.objectStoreNames.contains("person"))
{
console.log("contains person");
var transaction = db.transaction(["person"],"readwrite");
transaction.oncomplete = function(event)
{
// console.log("All done!");
};
var content= document.querySelector("#content");
transaction.onerror = function(event)
{
// Don't forget to handle errors!
console.dir(event);
};
var objectStore = transaction.objectStore("person"); //得到person的objectStore对象
objectStore.openCursor().onsuccess = function(event)
{
var cursor = event.target.result;
var flag=0;
if (cursor)
{
console.log(cursor.key);
console.dir(cursor.value);
var div=document.createElement("div");
div.id=cursor.key;
var div1=document.createElement("div");
var div2=document.createElement("div");
var div3=document.createElement("div");
div1.innerHTML=cursor.value[flag]["name"];
div2.innerHTML=cursor.value[flag]["phone"];
div3.innerHTML=cursor.value[flag]["address"];
div.appendChild(div1);
div.appendChild(div2);
div.appendChild(div3);
content.appendChild(div);
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.");
};
//add new record
document.querySelector("#add").addEventListener("click", function()
{
var name=document.querySelector("#name").value;
var phone=document.querySelector("#phone").value;
var address=document.querySelector("#address").value;
var person=[{"name":name,"phone":phone,"address":address}]
var transaction = db.transaction(["person"], "readwrite");
transaction.oncomplete = function(event)
{
console.log("transaction complete");
};
transaction.onerror = function(event)
{
console.dir(event);
};
var objectStore = transaction.objectStore("person"); //得到person的objectStore对象
objectStore.add(person);
objectStore.openCursor().onsuccess = function(event)
{
cursor = event.target.result;
var key;
if(lastCursor==null)
{
key=cursor.key;
lastCursor=key;
}
else
{
key=++lastCursor;
}
var content= document.querySelector("#content");
var div=document.createElement("div");
div.id=key
var div1=document.createElement("div");
var div2=document.createElement("div");
var div3=document.createElement("div");
div1.innerHTML=name;
div2.innerHTML=phone;
div3.innerHTML=address;
div.appendChild(div1);
div.appendChild(div2);
div.appendChild(div3);
content.appendChild(div);
arrayKey.push(key);
console.log("success add new record!key:"+key);
console.dir(person);
}
});
document.querySelector("#delete").addEventListener("click", function()
{
if(arrayKey.length==0){ console.log("no data to delete!"); }
else
{
var transaction = db.transaction(["person"], "readwrite");
transaction.oncomplete = function(event)
{
console.log("transaction complete!");
};
transaction.onerror = function(event)
{
console.dir(event);
};
var objectStore = transaction.objectStore("person"); //得到person的objectStore对象
var removeKey=arrayKey.shift();
var getRequest=objectStore.get(removeKey);
getRequest.onsuccess=function(e)
{
var result =getRequest.result;
console.dir(result);
}
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";
}
});
//删除数据库
document.querySelector("#deleteDB").addEventListener("click", function() {
var deleteDB=indexedDB.deleteDatabase("persons");
var content= document.querySelector("#content");
while(content.firstChild)
{
content.removeChild(content.firstChild);
}
deleteDB.onsuccess=function(event){
console.log("success delete database!");
};
deleteDB.onerror=function(event){
console.dir(event.target)
};
});
}
window.addEventListener("DOMContentLoaded", init, false);
</script>
<style type="text/css">
div#head div {
width: 150px;
padding: 0;
margin: 1px;
background-color: Yellow;
text-align: center;
font-family: @ 微软雅黑;
font-size: larger;
float: left;
}
#content {
width: 460px;
}
#content div {
width: 460px;
text-align: center;
background-color: Aqua;
margin: 1px;
float: left;
}
#content div div {
width: 150px;
text-align: center;
background-color: Aqua;
margin: 1px;
float: left;
}
</style>
</head>
<body>
<span>姓名：</span><input id="name" type="text" maxlength="5" />
<span>电话：</span><input id="phone" type="text" maxlength="12" />
<span>地址：</span><input id="address" type="text" maxlength="30" />
<button id="add" accesskey="Enter">添加</button>
<button id="delete">删除</button>
<button id="deleteDB">删除数据库</button>
<div id="head">
<div>姓名</div>
<div>电话</div>
<div>地址</div>
</div>
<br />
<div id="content"></div>
</body>
</html>
运行效果：
第一次打开页面，发现数据库索引已成功创建。
添加几条数据后：
点击“删除”按钮两次，删除两条记录：
点击“删除数据库”后，再次刷新页面，发现原来存储的数据都已删除。
相关推荐
该资源包含了一个indexdb学习的简单demo，包含了增删改查，以及索引的创建和使用，可以参考博客http://blog.csdn.net/mockingbirds/article/details/48749375
实现了简单的增删改查demo，适用于谷歌，没做过其他浏览器的适配
主要介绍了使用HTML5 IndexDB存储图像和文件的示例的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。
本篇文章主要介绍了HTML5中indexedDB 数据库的使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本人从华章图书网站下的资源 为了与大家分享 遂上传 有兴趣游戏开发的朋友可看看
html实现扫雷小游戏源码，实现windows系统的扫雷的基本功能，直接点击index.html运行。具体效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/127886480
html制作五子棋对战源码，酷炫的界面效果，带AI，可本地双人一起玩，也可以单独跟AI单挑。下载后直接点击gobang.html运行，就可以开始下五子棋了。 代码讲解地址：...
使用indexdb的任务管理器 使用indexdb的任务管理器
IndexDbHelper 帮助将indexDb管理到浏览器中的工具简化IndexDB使用的类使用来自浏览器的窗口引用或其他提供以下接口的东西来构建它：window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window....
React Hooks使用Dexie.js IndexDB库 Dexie.js是一个华丽的库，可通过简单而强大的语法使用IndexDB 。 但是，如果要在React项目中使用Dexie.js，则需要实现一系列允许异步交互的逻辑。 为此，useDexie是一个包含一...
react-use-idb (useIdb) 管理单个 indexDB 项目的 React 副作用挂钩。 对 useLocalStorage 的直接替换。 为什么 ？ LocalStorage 是同步的，因此存在性能问题 LocalStorage 也受到限制，仅存储字符串并且不提供用于...
Algorithm-study-indexdb.zip,基于磁盘的索引数据库实现。纯粹是用Java编写的。,算法是为计算机程序高效、彻底地完成任务而创建的一组详细的准则。
店铺 这是一个有趣的项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production ...
SimpleIndexedDB.js 使用ES6的简单IndexedDB的包装器（JavaScript Promise，let，箭头功能）。
strimJS 一个管理 localstorage 和 indexDB 的库
html实现经典打方块小游戏源码，通过控制鼠标移动方块，单击发出子弹， 它可以连发子弹，敌方方块被打碎后会分裂为多个小方块。整个游戏非常流畅，性能非常好。 总共三次机会，当碰到别的方块失去一次机会，有历史总...
HTML / CSS 安装 要安装必要的依赖项，请运行以下命令： npm install 用法 如果在本地运行，Mongo必须正在运行 依存关系/信用 表示 猫鼬 精简版服务器 压缩 摩根 问题 如果您对存储库有任何疑问，请打开问题或联系...
工商银行 indexdb连接器