localStorage demo:留言板

最新推荐文章于 2021-12-13 17:19:16 发布

yz764127031

最新推荐文章于 2021-12-13 17:19:16 发布

阅读量1.4k

点赞数 1

分类专栏： web 前端

本文链接：https://blog.csdn.net/yz764127031/article/details/62885469

版权

web 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

版本一
自己写的，没有用到事件oninput，实现比较复杂没有效率
为了实现实时监听是否有输入，使用了定时器刷新保存
截图
这里写图片描述

功能描述：
1.定时两秒自动保存留言板内容，关闭浏览器重新打开后，留言板内容依然存在
2.点击clear，清除留言板内容
3.点击sumbit，在下方打印留言板内容，点击删除可以删除该条留言

代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>留言板</title>
</head>
 <body>
<div>
  内容:
   <br /> 
  <textarea id="txt" cols="60" rows="10"></textarea>
  <br /> 
  <input type="button" value = "clear" id="btn_clear">
  <input type="button" value = "sumbit" id="btn_submit">
</div>
<div id="msg"></div>
</body>
<script  type="text/javascript">
window.onload =function() {
        var storage = window.localStorage;
        var text = document.getElementById('txt');
        var msg = document.getElementById("msg");
        if (!storage.getItem("save")){
          storage.setItem("save","");
        }
        var savevalue =localStorage.getItem("save");

        if (savevalue != "") {
          text.value = savevalue;

        }
        setInterval(save,2000);

        function save(){
            storage.setItem("save",text.value);
        };

        btn_clear.onclick = function(){
          storage.removeItem("save");
          text.value = "";
        };

        btn_submit.onclick = function(){
          var p = document.createElement("p");
          msg.appendChild(p);
          p.innerHTML = text.value + " <span>删除</span>";
          var Span = document.getElementsByTagName("span");
          var P = document.getElementsByTagName("p");

          for(var i=0; i<Span.length; i++){

          Span[i].onclick = function(){
          msg.removeChild(this.parentNode);
         }
         }
        }


    };
</script>
</html>

版本二
老师上课给的，使用事件oninput来解决实时监听输入的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>review</title>
    <style>
        .container {
            width: 40%;
            margin: 100px auto;
        }
        textarea {
            resize: none;
            outline: none;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="">
            <textarea name="" id="feedback" cols="30" rows="5"></textarea>
        </form>
    </div>
    <script>
        window.onload = function() {
            var feedback = document.getElementById("feedback");

            if (localStorage.data) {
                feedback.value = localStorage.data;
            }

            feedback.oninput = function() {
                localStorage.data = this.value;
            };
        };
    </script>
</body>
</html>