本地数据库indexedDB实现web留言本

原创 苏秦陶侃 随笔 html5 200阅读 2017-05-07 23:19:11 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>indexedDB制作web留言本</title>
</head>
<body onload="init()">
<h1>使用indexedDB制作web留言本</h1>
<table>
<tr><td>姓名</td><td><input type="text" id="name"></td></tr>
<tr><td>留言</td><td><input type="text" id="memo"></td></tr>
<tr>
<td></td>
<td><input type="button" value="保存" onclick="saveData();"></td>
</tr>

</table>
<hr>
<table id="datatable" border="1"></table>
<p id="msg"></p>

</body>
</html>

<script type="text/javascript">
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB ||window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;

var dbName = "myWebNote";
var dbVersion = 20170507;
var idb,datatable;

function init(){
    var dbConnect = indexedDB.open(dbName,dbVersion);
    dbConnect.onsuccess = function(e){
        idb = e.target.result;
        alert("indexedDB数据库连接成功");
        datatable = document.getElementById("datatable");
    }

    dbConnect.onerror = function(e){
        alert("数据库连接失败");
    }

    dbConnect.onupgradeneeded = function(e){
        idb = e.target.result;
        if(!idb.objectStoreNames.contains("MsgData")){
            var tx = e.target.transaction;
            tx.onabort = function(e){
                alert("创建对象仓库失败");
            }
            var name = "MsgData";
            var optionalParameters = {
                keyPath:"id",
                autoIncrement:true
            };
            var store = idb.createObjectStore(name,optionalParameters);
            alert("对象仓库创建成功");

        }
    }
}

function removeAllData(){
    for(var i = datatable.childNodes.length-1; i >= 0; i--){

//这里需要注意,只能使用递减的方式来进行循环,若是采用递增的方式那么执行到一半的时候会因为找不到datatable.childNodes[i]而报错
datatable.removeChild(datatable.childNodes[i]);
}
var tr = document.createElement('tr');
var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th');
th1.innerHTML = '姓名';
th2.innerHTML = '留言';
th3.innerHTML = '时间';
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
datatable.appendChild(tr);
}

function showData(dataObject){
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    var td3 = document.createElement('td');
    td1.innerHTML = dataObject.name;
    td2.innerHTML = dataObject.memo;
    td3.innerHTML = new Date();
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    datatable.appendChild(tr);
}

function showAllData(){
    removeAllData();
    var tx = idb.transaction(["MsgData"],"readonly");//开启事务
    var store = tx.objectStore("MsgData");//获取将要操作的对象仓库
    // store.clear();
    var range = IDBKeyRange.lowerBound(1);
    var direction ="next";
    var req = store.openCursor(range,direction);//开启游标
    req.onsuccess = function(){
        var cursor = this.result;
        if(cursor){
            showData(cursor.value);
            cursor.continue();//继续检索
        }
    }
}
function addData(name,message,time){
    var tx= idb.transaction(["MsgData"],"readwrite");
    tx.oncomplete = function(){
        alert("保存成功");
    }
    tx.onabort = function(){
        alert("保存失败");
    }
    var store = tx.objectStore("MsgData");
    var value = {
        name:name,
        memo:message,
        time:time
    };
    store.put(value);
}

function saveData(){
    var name =document.getElementById('name').value;
    var memo =document.getElementById("memo").value;
    var time = new Date().getTime();
    addData(name,memo,time);
    showAllData();
}

</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复