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

使用Web Storage(localStorage)实现通讯录的存储,显示和查询。

效果图:

Web Storage作为简单数据库存储信息_第1张图片

代码截图:

Web Storage作为简单数据库存储信息_第2张图片

Web Storage作为简单数据库存储信息_第3张图片

源代码:

dbstore.html

<body>
    <table>
        <tr>
            <th>姓名:</th>
            <th><input type="text" id="name"></th>
        </tr>
        <tr>
            <th>Email:</th>
            <th><input type="text" id="email"></th>
        </tr>
        <tr>
            <th>电话号码:</th>
            <th><input type="text" id="tel"></th>
        </tr>
        <tr>
            <th>备注:</th>
            <th><input type="text" id="memo"></th>
        </tr>
        <tr>
            <th colspan="2">
                <input type="button" id="id_save" value="保存" onclick="saveInfo()">
                <input type="button" id="id_clear" value="清空记录" onclick="clearData()">
            </th>
        </tr>
    </table>
    <hr/>
    <p id="id_p"></p>
    检索:<input type="text" id="id_search_input"/>
    <input type="button" value="检索" onclick="showResult('id_p')"/><br/>
    <input type="button" value="显示全部" onclick="showAllData('id_p_all')" /><br />
    <p id="id_p_all"></p>
</body>

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 + "<br/>Email:" + data.email + "<br/>电话号码:"
        + data.tel + "<br/>备注:" + 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 = "<table cellspacing='0' border='1'><tr><th>姓名</th><th>Email</th><th>电话号码</th><th>备注</th></tr>";
    for(var i = 0; i < localStorage.length; i++)
    {
        var key = localStorage.key(i);
        var str = localStorage.getItem(key);
        var data = JSON.parse(str);
        result += "<tr><th>" + key + "</th><th>" + data.email + "</th><th>"
            + data.tel + "</th><th>" + data.memo + "</th></tr>";
    }
    result += "</table>";
    target.innerHTML = result;
    // target.innerText = result;
}

你可能感兴趣的:(Web Storage作为简单数据库存储信息)