js学习-简单的网页留言板

最新推荐文章于 2023-05-31 22:33:31 发布

kaka_hikun

最新推荐文章于 2023-05-31 22:33:31 发布

阅读量743

点赞数 1

分类专栏： js学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106431765

版权

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

js学习-简单的网页留言板

知识点：
留言板.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页留言板</title>
    <script type="text/javascript" src="留言板.js"></script>
</head>
<body>
    <h1>简单的网页留言板</h1>
    <textarea  id="dome" cols="60" rows="10"></textarea>
    <br/>
    <input type="button" value="保存" onclick="saveStorage('dome');">
    <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("数据已经被保存！"); //弹出对话框
    loadStorage('msg');
}
function loadStorage(id) {
    var reselt = '<table border = 1>'; //边框粗度
    for(var i = 0 ; i < localStorage.length; i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var data = new Date();
        data.setTime(key);
        var datestr = data.toUTCString();
        reselt +='<tr><td>'+'这是第'+ i +'条数据</td><td>'+value+'</td><td>'+datestr+'</td></tr>';
    }
    reselt +='</table>';
    var target = document.getElementById(id);
    target.innerHTML = reselt;
}
function clearStorage(id) {
    localStorage.clear();
    alert("数据已经被成功删除！");
    loadStorage('msg');
}

kaka_hikun

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
js学习-简单的网页留言板

js学习-简单的网页留言板知识点：简单的留言板.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网页留言板</title> <script type="text/javascript" src="留言板.js"></script></head><body&gt
复制链接

扫一扫