web 存储
【摘要】
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> function saveStorage(){ var data=new Objec...
-
<!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>
视频课堂https://edu.csdn.net/combo/detail/802
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/79230261
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）