码迷,mamicode.com
首页 > Web开发 > 详细

web storage 简单的网页留言版

时间:2017-09-16 14:44:34      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:order   tar   set   技术   storage   tor   test   效果   length   

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>简单的网页留言版</title>
		<script type="text/javascript" src="js/test6.js" ></script>
	</head>
	<body>
		<h1>简单的网页留言版</h1>
		
		<textarea id="demo" cols="60" rows="10"></textarea>
		<br>
		<input type="button"  value="保存" onclick="saveStorage(‘demo‘);">
		<input type="button"  value="清除" onclick="clearStorage(‘msg‘);">
		<input type="button"  value="读取" onclick="loadStorage(‘msg‘);">
		<hr>
		<p id="msg"></p>
	</body>
</html>

  js

function saveStorage(id) {
	var data=document.getElementById(id).value;
	var time=new Date().getTime();
	localStorage.setItem(time,data);
	alert("数据保存成功");
}
function loadStorage(id){  
    var result = ‘<table border="1">‘;  
    for(var i = 0;i < localStorage.length;i++){ //localStorage.length所有保存在localStorage中的数据条数  
        var key = localStorage.key(i); //得到localStorage中与相应索引号对应的数据  
        var value = localStorage.getItem(key);  
        var date = new Date();  
        date.setTime(key);  
        var datestr = date.toGMTString();  
        result += ‘<tr><td>‘ + value + ‘</td><td>‘ + datestr + ‘</td></tr>‘;  
    }  
    result += ‘</table>‘;  
    var target = document.getElementById(id);  
    target.innerHTML = result;  
}  
//将localStorage中保存的数据全部清除  
function clearStorage(id){  
    localStorage.clear();  
    alert("全部数据被清除");  
    loadStorage(‘msg‘);  
}  

  效果:

技术分享

 

web storage 简单的网页留言版

标签:order   tar   set   技术   storage   tor   test   效果   length   

原文地址:http://www.cnblogs.com/guangzhou11/p/7531118.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!