<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function saveStorage(){ var data=new Object; data.name=document.getElementById('name').value; data.email=document.getElementById('email').value; data.phone=document.getElementById('phone').value; data.memo=document.getElementById('memo').value; //----转换json格式 var str=JSON.stringify(data); alert(str); localStorage.setItem(data.name,str); alert('数据已经保存'); } //查找web存储的数据 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.phone+'<br/>'; result+="备注"+data.memo+'<br/>'; var target=document.getElementById(id); target.innerHTML=result; } </script> </head> <body> <!--html代码--> <h1>使用Web Storage模拟数据库</h1> <table> <tr><td>姓名</td><td><input type="text" id="name"></td></tr> <tr><td>邮箱</td><td><input type="email" id="email"></td></tr> <tr><td>电话</td><td><input type="text" id="phone"></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"></p> <input type="button" value="检索" οnclick="findStorage('msg');"/> </p> <p id="msg"></p> </body> </html>
json格式的双向转换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web留言本</title> <script> function saveStorage(id){ var data=document.getElementById(id).value; var time=new Date().getTime(); localStorage.setItem(time,data); alert('数据已保存'); loadStorage('msg'); } function loadStorage(id){ var result='<table border="1">'; for(var i=0;i<localStorage.length;i++){ var key=localStorage.key(i); var value=localStorage.getItem(key); var date=new Date(); date.setTime(key); var datastr=date.toGMTString(); result+='<tr><td>'+value+'</td><td>'+datastr+'</td></tr>'; } result+='</table>'; var target=document.getElementById(id); target.innerHTML=result; } function clearStorage(){ localStorage.clear(); alert('全部数据被清除。'); loadStorage('msg'); } </script> </head> <body> <h1>Web留言本</h1> <textarea id="memo" cols="60" rows="10"></textarea><br /> <input type="button" value="追加" οnclick="saveStorage('memo');" /> <input type="button" value="初始化" οnclick="clearStorage('msg');" /> <hr /> <p id="msg"></p> </body> </html>WEB SQL的存储