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

最新推荐文章于 2024-05-17 01:29:34 发布

galaa2011

最新推荐文章于 2024-05-17 01:29:34 发布

阅读量6.5k

点赞数 7

分类专栏： JavaScript 文章标签： html5 indexedDB 浏览器本地存储

本文链接：https://blog.csdn.net/galaa2011/article/details/45152319

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浏览器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="男";
	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 οnclick="_create('user')">打开数据库</button>
   	<button οnclick="_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 οnclick="_add()">添加数据</button>
    <button οnclick="_get()">获取数据</button><br />
    <p id="display"></p>
    
</body>
</html>