<!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; }
HTML5基础22----作为简单数据库来利用
最新推荐文章于 2023-02-14 13:15:58 发布