HMTL5 Web存儲的localStorage的使用實例【圖文說明】

本文轉載自查看原文 2012-12-08 17:17 6584 HTML5 & Javascript/ taoweiji/ html5/ localStorage/ html/ 本地存儲/ javascript

使用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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5 Web存儲的localStorage和sessionStorage的使用方法【圖文說明】 Java 的swing.GroupLayout布局管理器的使用方法和實例【圖文說明】 HTML5 Web SQL Database 數據庫的使用方法【圖文說明】 OPENDJ的安裝圖文說明 Java 通過JDBC連接Mysql數據庫的方法和實例【圖文說明】 Windows 安裝 GTK+ 圖文說明創建自己的Nuget--圖文說明 Java 的布局管理器GridBagLayout的使用方法【圖文說明】 Javascript和HTML5 利用canvas構建 Web五子棋游戲程序設計【圖文說明】在eclipse導入Java 的jar包的方法 JDBC【圖文說明】