WebStorage当做简单数据库

<span style="font-family: Arial, Helvetica, sans-serif;">H5代码</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html></span>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="appWeb3.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>姓名:</td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><input type="text" id="email"></td>
        </tr>
        <tr>
            <td>电话号码:</td>
            <td><input type="text" id="tel"></td>
        </tr>
        <tr>
            <td>备注:</td>
            <td><input type="text" id="memo"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="保存" onclick="saveStorage()"></td>
        </tr>
    </table>
    <hr>
    <p>检索:
    <input type="text" id="find">
        <input type="button" value="检索" onclick="findStorage('msg')">
    </p>
    <p id="msg"></p>
</body>
</html>


JS代码

/**
 * Created by chenglei on 15/7/10.
 */


function saveStorage(){
    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);
    localStorage.setItem(data.name,str);
    alert("数据以保存");
}

function findStorage(id){
    var find = document.getElementById('find').value;
    var str = localStorage.getItem(find);
    var data = JSON.parse(str);
    var result = "姓名:"+data.name+"<br/>"
    result += "email:"+data.email+"<br/>"
    result += "tel:"+data.tel+"<br/>"
    result += "memo:"+data.memo+"<br/>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}


你可能感兴趣的:(WebStorage当做简单数据库)