localStorage demo:留言板

来源：互联网发布：美工怎么样编辑：程序博客网时间：2024/06/06 16:45

版本一
自己写的，没有用到事件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>

0 0