访客留言板 --- loadStorage

最新推荐文章于 2021-05-31 19:47:00 发布

uhhuh-495

最新推荐文章于 2021-05-31 19:47:00 发布

阅读量588

点赞数

分类专栏：功能（方法）实现案例文章标签：留言板 JavaScrip 前端

本文链接：https://blog.youkuaiyun.com/weixin_42166007/article/details/96622508

版权

功能（方法）实现案例专栏收录该内容

27 篇文章

订阅专栏

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的网页留言板</title>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>

<h1>简单的网页留言板</h1>
<textarea id="dome" rows="12" cols="60"></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;  //获取textarea数据作为键名
    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 date = new Date();
        date.setTime(key); //将时间写入键作为新的时间
        var datestr = date.toGMTString();  //将时间转换为格林位置时间
        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');
}