HTML5基础22----作为简单数据库来利用

最新推荐文章于 2023-02-14 13:15:58 发布

zhaihaohao1

最新推荐文章于 2023-02-14 13:15:58 发布

阅读量477

点赞数

分类专栏： HTML5基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47079019

版权

HTML5基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--作为简单数据库来利用-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="appWeb22.js"></script>
</head>
<body>
将Web Storage作为简易数据库，如果能解决数据检索，对列进行管理，就可以将Web Storage作为数据库来利用了。
<table>
    <tr>
        <td>姓名</td>
        <td><input type="text" id="name"></td>
    </tr>
    <tr>
        <td>邮箱</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="readStorage('msg')">
</p>
<p id="msg"></p>
</body>
</html>


js:
/**
 * Created by renchong on 2015/7/26.
 */
//保存数据
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 readStorage(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;

}

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础22----作为简单数据库来利用

html>lang="en"> charset="UTF-8"> src="appWeb22.js">将Web Storage作为简易数据库，如果能解决数据检索，对列进行管理，就可以将Web Storage作为数据库来利用了。姓名 type="text" id="name"> 邮
复制链接

扫一扫

专栏目录