Web Storage作为简单数据库存储信息

使用Web Storage（localStorage）实现通讯录的存储，显示和查询。

效果图：

代码截图：

源代码：

dbstore.html

   

       
           
           
       
       
           
           
       
       
           
           
       
       
           
           
       
       
           
       
   

姓名：
Email：
电话号码：
备注：

   

---

   

    检索：
   

   

   

dbstore.js

function saveInfo() {
    var data = new Object();
    data.name = document.getElementById('name').value;
    data.email = document.getElementById('email').value;
    data.tel = document.getElementById('tel').value;
    data.memo = document.getElementById('memo').value;
    var str = JSON.stringify(data); //将Object转化为Json数据类型
    localStorage.setItem(data.name, str);
    alert("数据存储成功！");
}


function showResult(id_show) {
    var key = document.getElementById('id_search_input').value;
    var str = localStorage.getItem(key);
    var data = JSON.parse(str);
    var result = "姓名：" + data.name + "
Email:" + data.email + "
电话号码："
        + data.tel + "
备注：" + data.memo;
    var target = document.getElementById(id_show);
    target.innerHTML = result;
    //target.innerText = result;
}


function clearData() {
    localStorage.clear();
    alert("删除成功！");
}


function showAllData(id_show){
    var target = document.getElementById(id_show);
    var result = "

";
    for(var i = 0; i < localStorage.length; i++)
    {
        var key = localStorage.key(i);
        var str = localStorage.getItem(key);
        var data = JSON.parse(str);
        result += "";
    }
    result += "

姓名	Email	电话号码	备注
" + key + "	" + data.email + "	"             + data.tel + "	" + data.memo + "

";
    target.innerHTML = result;
    // target.innerText = result;
}