基于Web存储技术制作网页日志本 localStorage技术，可以把用户记录的日志永久存储下来。本例将实现一个单页面的日志本，包括添加、删除指定日期的日志和清空全部日志3个功能

最新推荐文章于 2024-03-27 23:13:18 发布

thinkasany

最新推荐文章于 2024-03-27 23:13:18 发布

阅读量3k

点赞数 16

文章标签： javascript css html html5

本文链接：https://blog.csdn.net/daddykei/article/details/106167920

版权

在这里插入图片描述

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style="display: flex;width:200px;height:20px;margin: auto; font-size: 24px">我的日志本</div>
    <br>
    <div style="display: flex;width:200px;height:20px;margin: auto;font-size: 20px"> 开始写日志</div>
    <br>
    <form action="">
        <div style=" width: 80%;height: 300px;display: flex;margin: auto">
            <input type="text" id="testData" style="width: 100%;height: 100%">
        </div>
        <br>
        <div style="display: flex;width:200px;height:20px;margin: auto"><input type="button" value="保存日志" onclick="addData()">
            <input type="button" value="删除全部日志" onclick="deleteItems()"></div>

    </form>
    <div style="display: flex;width:200px;height:20px;margin: auto; font-size: 24px">历史记录：</div>
    <br><br>
    <div style="display: flex;width:80%;height:auto;margin: auto;">
        <table id="allData" border="1"></table>
    </div>

</body>
<script>
    var allData = document.getElementById("allData");
    refreshData(); ///刷新数据显示
    function refreshData() {
        var length = localStorage.length;
        if (length == 0) {
            allData.innerHTML = "目前暂无数据："
        } else {
            allData.innerHTML = "<tr><th>序号</th><th>目标内容</th><th>保存时间</th><th>操作</th></tr>"
            for (var i = 0; i < length; i++) {
                var j = i + 1;
                var tr = document.createElement("tr");
                var name = localStorage.key(i);
                console.log(name);

                tr.innerHTML = '<td>' + j + '</td><td>' + name + '</td><td>' + localStorage.getItem(name) +
                    '</td><td><button οnclick="delData(' + i + ')">删除</button></td>';
                // '</td><td><button οnclick="delData(' + i + ')">deldete</buttoon></td>';
                allData.appendChild(tr);
            }
        }
    }

    function addData() {
        var length = localStorage.length;
        var n = length + 1;
        var test = document.getElementById('testData');
        var value = test.value;
        var now = new Date();
        var keytime = now.toLocaleString();
        localStorage.setItem(value, keytime);
        test.value = ""; //输入框为空 再刷新一次页面
        refreshData();
    }

    function delData(n) {
        var name = localStorage.key(n);
        localStorage.removeItem(name);
        refreshData();
    }

    function deleteItems() {
        localStorage.clear();
        refreshData();
    }
</script>

</html>

thinkasany

关注

16
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
基于Web存储技术制作网页日志本 localStorage技术，可以把用户记录的日志永久存储下来。本例将实现一个单页面的日志本，包括添加、删除指定日期的日志和清空全部日志3个功能

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
复制链接

扫一扫