WebStorage——作为简易数据库利用

最新推荐文章于 2017-10-11 14:35:00 发布

cba142536

最新推荐文章于 2017-10-11 14:35:00 发布

阅读量215

点赞数

分类专栏： HTML5+CSS3

本文链接：https://blog.csdn.net/cba142536/article/details/54618957

版权

HTML5+CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. web03.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="web03.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="保存" οnclick="saveStorage()"></td>
        </tr>
    </table>
    <hr>
    <p>检索：
        <input type="text" id="find"><input type="button" value="检索" οnclick="findStorage('msg')"></p>
    <p id="msg"></p>
</body>
</html>

web03.js

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+="邮箱："+data.email+"<br>";
        result+="电话："+data.tel+"<br>";
        result+="备注："+data.memo+"<br>";
    var target=document.getElementById(id);
    target.innerHTML=result;
}

cba142536

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebStorage——作为简易数据库利用

1. web03.htmlhtml lang="en">head> meta charset="UTF-8"> title>Titletitle> script src="web03.js">script>head>body> table> tr>td>姓名：td>td>input type="text" id="name">td>tr>
复制链接

扫一扫

专栏目录