使用本地存储Storage实现留言

最新推荐文章于 2021-06-07 18:35:35 发布

原创最新推荐文章于 2021-06-07 18:35:35 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#存储 #html

html5+css3 专栏收录该内容

50 篇文章

订阅专栏

这篇博客探讨了HTML5中的Web Storage特性，作为替代传统Cookie存储的解决方案。文章指出，Cookie存在大小限制、每次请求发送的冗余以及安全问题。HTML5引入的Local Storage和Session Storage解决了这些问题，提供更高效、安全的本地数据存储方式。Local Storage持久化存储，而Session Storage与会话生命周期同步。此外，Storage接口提供了相应的属性和方法，便于操作数据。最后，文中给出了使用Local Storage实现留言功能的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在传统的HTML时代，开发者如果需要在客户端存储少量数据，只能通过cookie来实现，但Cookie存在如下三点不足：大小被限制为3KB；会包含在每个HTTP请求中向服务器发送，会导致多次发送重复数据；在网络传输时并未加密，存在一些安全隐患

2.HTML5新增了Web Storage功能，可以让应用程序在客户端运行时在客户端保存数据。H5提供了两个Web Storage：Session Storage：基于Session的Web Storage。保存的数据的生存期限和Session相同，当Session结束时，Session Storage保存的数据也就丢失了；Local Storage：保存在用户磁盘的Web Storage，保存的数据生存期限很长，只有当用户或者程序显式的清楚这些数据才会消失

3.Storage（包括local Storage和session Storage）提供了如下属性方法：

1.length：返回该Storage里保存了多少组键值对
2.key(index)：返回该Storage中的第index个Key
3.getItem(key)：返回该Storage指定的key对应的value值
4.set(key，value)：向Storage存入指定的键值对
5.removeItem(key)：向Storage移除指定的key的键值对
6.clear()：清除该Storage中的所有键值对

4.实现代码:

<!Doctype html>
<html>
    <head>
        <title>本地存储数据</title>
    </head>
    <body>
        <form>
            <label for="msg">输入内容:</label>
            <textarea rows="4" colw="20" id="
            <br />
            <input type="button" value="留言" id="btn" />
            <br />
            <input type="reset" value="重置" />
            <br/>
        </form>
        <input type="button" id="sbtn" value="读取" />
        <input type="button" id="cbtn" value="清除" />
        <div id="show"></div>
        <script>
            window.onload = function(){
                /* 使用local Storage */
                var message = document.getElementById("msg").innerHTML ;
                localStorage.setItem("message",message) ;
                /*使用local Storage读取本地数据*/
                document.getElementById("sbtn").onclick = function() {
                    document.getElementById("show").innerHTML = localStorage.get("message") ;
            };
                /*使用local Storage清除数据*/
                document.getElementById("cbtn").onclick = function() {
                    document.getElementById("show").innerHTML = "" ;
                    localStroage.clear() ;
                    alert("清除成功") ;
                };
            };