HTML5本地存储之 indexedDB 完整实例及效果图展示

来源：互联网发布：java编写管理系统编辑：程序博客网时间：2024/06/02 12:05

浏览器indexedDB本地存储效果 (读者可使用支持indexedDB的浏览器测试效果，如：chrome...)

初始设计页面：

--->打开数据库如数据库不存在，则执行创建过程。如下图，点击打开数据库后，创建了user数据库和info表：

--->添加数据录入信息后，点击添加数据，则向info表中插入相应数据：

--->获取数据从info表中通过游标遍历数据，并显示在页面上：

--->删除数据库删除整个表info和数据库user。

完整代码如下：

<!DOCTYPE html><html><head><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="男";elsexb="女";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>

1 0