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”是指HTML5中的Indexed Database API，它提供了一种在客户端存储大量结构化数据的方式，特别是对于不需要服务器交互的场景非常有用。相较于传统的Web存储技术如localStorage，IndexedDB...
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。
HTML5和Canvas是现代网页开发中的重要技术，尤其在游戏开发领域中，它们的应用日益广泛。本书"HTML5+Canvas+游戏开发实战"显然旨在帮助开发者掌握如何利用这两种技术来创建交互式游戏。HTML5是一种超文本标记语言，...
本“android手机HTML5demo”提供了一个实例，帮助开发者了解如何在Android环境中实现HTML5技术。 在Android平台上，HTML5主要通过WebView组件来展示和运行。WebView是一个可以加载和显示网页内容的视图，它是...
HTML5的IndexedDB是一个强大的本地存储机制，它允许在客户端存储大量结构化的数据。相比于Web Storage，IndexedDB更适合处理大规模、复杂的数据结构。在本文中，我们将深入探讨如何使用IndexedDB进行数据操作，包括...
html实现扫雷小游戏源码，实现windows系统的扫雷的基本功能，直接点击index.html运行。具体效果展示地址：https://blog.csdn.net/weixin_43151418/article/details/127886480
此外，HTML5的离线存储能力（如localStorage和indexDB）也是其强大之处。这些本地存储机制可以让音乐播放器在离线状态下仍然能够播放之前缓存的歌曲，提升用户体验。而Web Workers则允许在后台执行复杂计算，如音频...
1. **打开数据库(Open Database)**：首先，我们需要通过`window.indexedDB.open()`方法创建一个新的数据库实例，指定数据库名称和版本号。 2. **创建对象存储(Create Object Store)**：在数据库中创建一个对象存储，...
综上所述，"解开绳子HTML5游戏源码"是一个展示HTML5强大功能的实例，涵盖了从图形渲染、音频处理到本地数据存储等多个方面，对于想要学习HTML5游戏开发的人员来说，这是一个非常有价值的参考资料。通过深入研究这款...
最后，HTML5的离线存储特性（如localStorage或indexDB）可以让页面在用户离线时仍能访问某些数据，这在表白页面中可能用于保存用户的个性化设置或表白记录。 综上所述，"520表白html5爱心代码"是一个利用HTML5的...
html制作五子棋对战源码，酷炫的界面效果，带AI，可本地双人一起玩，也可以单独跟AI单挑。下载后直接点击gobang.html运行，就可以开始下五子棋了。 代码讲解地址：...
5. 错误处理和恢复：在实现数据库系统时，必须考虑到可能出现的异常情况，如磁盘故障、网络中断等，因此需要有适当的错误处理和恢复机制。 通过"Algorithm-study-indexdb.zip"这个项目，你可以深入了解如何在Java中...
此外，HTML5的离线存储功能，如`localStorage`和`indexDB`，使得电子报纸可以在离线状态下阅读，增强了用户体验。用户不再需要持续的网络连接就能访问之前加载的内容，这对于网络条件不稳定的环境尤其有益。 CSS3也...
IndexDbHelper 帮助将indexDb管理到浏览器中的工具简化IndexDB使用的类使用来自浏览器的窗口引用或其他提供以下接口的东西来构建它：window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window....
《绿色HTML5生鲜水果超市电商模板》是一款专为线上生鲜水果超市设计的前端网页模板，其结合了HTML5技术的最新特性和电商网站的需求，旨在为用户提供流畅、美观且功能丰富的购物体验。以下是对该模板的详细解析： 一...
【标题】：“html5集合Vuejs开发商品日常卖记录、统计收入结果webapp项目代码”这一主题涉及到现代前端开发中的关键技术，HTML5和Vue.js，以及如何构建一个实用的Web应用程序来跟踪销售数据并进行收入统计。...
`simple-indexdb-js` 是一个JavaScript库，旨在简化对IndexedDB数据库的访问。这个库利用了ES6的特性，如Promise、let关键字和箭头函数，以提供一个更加简洁、易于理解和使用的API。IndexedDB是浏览器提供的一种本地...