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>
复制代码

 

posted @   ImWiki  阅读(6924)  评论(2)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛