web storage 简单的网页留言版
2024-10-07 15:57:29
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');
}
效果:
最新文章
- Java的析构函数System的finalize()
- XML在数据传输哪些方面会比JSON有优势,在哪些领域更加适合?
- API 设计: RAML、Swagger、Blueprint三者的比较
- Java之String类的使用细节
- PHP中文网上的无限极分类
- java web 开发实战经典(一)
- RMQ区间最大值与最小值查询
- [solution] JZOJ-5458 质数
- VMware xp系统联网
- SQLServer数据库降级方法详解
- (转)ThreadLocal-面试必问深度解析
- WebSocket 启用压缩
- Oracle EBS OPM 发放生产批
- python第二十九课——文件读写(读取数据操作)
- JavaScript cookie操作实现点赞功能
- mysql5.6升级及mysql无密码登录
- 踢掉某个li
- LDAP落地实战(三):GitLab集成OpenLDAP认证
- ejs引擎项目
- linux 常用进程使用命令