HTML5基础21----简单Web留言本(功能未实现)

最新推荐文章于 2024-06-21 08:30:00 发布

zhaihaohao1

最新推荐文章于 2024-06-21 08:30:00 发布

阅读量1.1k

点赞数

分类专栏： HTML5基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47079007

版权

HTML5基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--简单Web留言本-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="appWeb21.js"></script>
</head>
<body>
sessionStorage：将数据保存在session对象中。
session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，
也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内
所要求保存的任何数据。localStorage：将数据保存在客户端本地的硬件设备
（硬盘）中，即使浏览器被关闭了，改数据仍然存在，下一次打开浏览器访问网站
时仍然可以继续使用。
  <p id="msg"></p>
  <textarea id="memo3" cols="60" rows="10"></textarea><br/>
  <input type="button" value="追加数据" οnclick="saveStorage('memo3')"></button>
  <input type="button" value="删除数据" οnclick="clearStorage()"></button>

</body>
</html>

js:

/**
 * Created by renchong on 2015/7/25.
 */
//保存数据
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; localStorage.length; i++) {
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date=new Date();
        date.setTime(key);
        result+= "<tr><td>"+value+"</td><td>"+date+"</td></tr>";

    }
    result +="</table>";
    var target=document.getElementById(id);
    target.innerHTML=result;
}
//清空数据
function clearStorage(){
    localStorage.clear();
    alert("数据已删除");
    localStorage('msg');

}

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础21----简单Web留言本(功能未实现)

html>lang="en"> charset="UTF-8"> src="appWeb21.js">sessionStorage：将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。local
复制链接

扫一扫

专栏目录