zoukankan      html  css  js  c++  java
  • HMTL5 Web存储的localStorage的使用实例【图文说明】

    使用HTML5 Web存储的localStorage方式进行编写一个Web页面。

    功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            textarea {
                width: 500px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>简单的web存储留言板</h2>
            <textarea id="t1"></textarea>
            <br />
            <input type="button" class="button" onclick="addInfo()" value="留言" />
            <input type="button" class="button" onclick="cleanInfo()" value="清除留言" />
            <br />
            <hr />
            <label id="shows"></label>
            <textarea id="show" readonly="readonly"></textarea>
        </div>
        <script type="text/javascript">
            //使用HTML5 Web存储的localStorage方式进行编写一个Web页面。
            //功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图:
    
            function upInfo() {
                var lStorage = window.localStorage;
                var show = window.document.getElementById("show");
                if (window.localStorage.myBoard) {
                    show.value = window.localStorage.myBoard;
                }
                else {
                    var info = "还没有留言";
                    show.value = "还没有留言";
                }
            }
    
            function addInfo() {
                var info = window.document.getElementById("t1");
                var lStorage = window.localStorage;
                if (lStorage.myBoard) {
                    var date = new Date();
                    lStorage.myBoard += t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
                }
                else {
                    var date = new Date();
                    lStorage.myBoard = t1.value + "\n发表时间:" + date.toLocaleString() + "\n";
                }
    
                upInfo();
            }
            function cleanInfo() {
                window.localStorage.removeItem("myBoard");
                upInfo();
            }
            upInfo();
        </script>
    
    </body>
    </html>
  • 相关阅读:
    npm总是安装不成功,而且很慢?
    Nginx启动报错:10013: An attempt was made to access a socket in a way forbidden
    firebug如何使用
    video详解 HTML5中的视频:
    树的各种遍历
    SQL语句执行顺序
    vim常用命令
    无监督分类算法—K-Means
    Json字符串和Json对象的简单总结
    List拆分成多个集合
  • 原文地址:https://www.cnblogs.com/taoweiji/p/2809083.html
Copyright © 2011-2022 走看看