关闭

WebStorage当做简单数据库

320人阅读 评论(0) 收藏 举报
分类:
<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;
}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:140844次
    • 积分:2609
    • 等级:
    • 排名:第14003名
    • 原创:164篇
    • 转载:105篇
    • 译文:0篇
    • 评论:22条
    文章分类
    最新评论