<!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>