<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTML5 - IndexedDB</title>
<script type="text/javascript">
var db;
var request;
var objectStore;
function _create(dbName){
request=indexedDB.open(dbName,1);
request.onerror = function () {
alert("打开数据库失败:"+event.target.message);
}
request.onsuccess = function (event) {
alert("打开数据库成功!");
db=event.target.result;
var transaction = db.transaction(["info"], "readwrite");
objectStore = transaction.objectStore("info");
}
request.onupgradeneeded = function(event) {
alert("版本变化！");
db = event.target.result;
objectStore = db.createObjectStore("info", {keyPath: "userId",autoIncrement: true});
}
}
function _delete(dbName){
try{
request=indexedDB.deleteDatabase(dbName);
request.onerror = function () {
alert("删除数据库失败:"+event.target.message);
}
request.onsuccess = function (event) {
alert("删除数据库成功!");
}
}catch(e){
alert(e.getMessage);
}
}
function _get (argument) {
var p=document.getElementById("display");
p.innerHTML="";//获取数据前先清理一下页面已显示的数据
if(!db){
alert("请打开数据先！");
return false;
}
var store = db.transaction("info").objectStore("info");
var keyRange = IDBKeyRange.lowerBound(0);//规定keyRange从0开始
var cursorRequest = store.openCursor(keyRange);//按照keyRange的设置开启游标
cursorRequest.onsuccess = function (e) {
var result = e.target.result;
if (!!result == false)
return;
_render(result.value);
result.continue();//这边执行轮询读取
};
cursorRequest.onerror = function (e) {
alert("数据检索失败！");
};
}
function _render (e) {
var p=document.getElementById("display");
p.innerHTML+="姓名:"+e.name+" 年龄:"+e.age+" 性别:"+e.xb+"<br />";
}
function _add (argument) {
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var xb,flag=document.getElementById("nan").checked;
if(flag)
xb="男";
else
xb="女";
var detail={
name:name,
age:age,
xb:xb
}
if(!db){
alert("请打开数据先！");
return false;
}
var transaction = db.transaction(["info"], "readwrite");
objectStore = transaction.objectStore("info");
objectStore.add(detail);
alert("添加成功！");
}
</script>
</head>
<body>
<small>添加前请先打开数据库(如数据库不存在则执行创建过程)</small><br /><br />
<button onClick="_create('user')">打开数据库</button>
<button onClick="_delete('user')">删除数据库</button><br /><br />
姓名：<input type="text" id="name"><br />
年龄：<input type="number" id="age" min=1><br />
性别：<br />
男：<input type="radio" id="nan" name="xb" value="male" checked>
女：<input type="radio" id="nv" name="xb" value="female"><br />
<button onClick="_add()">添加数据</button>
<button onClick="_get()">获取数据</button><br />
<p id="display"></p>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
2017-04-22 js验证身份证格式