HTML5离线存储

最新推荐文章于 2025-07-13 10:52:52 发布

原创最新推荐文章于 2025-07-13 10:52:52 发布 · 568 阅读

CC 4.0 BY-SA版权

本文深入探讨了浏览器客户端存储的两种方式：sessionStorage和localStorage。sessionStorage在浏览器关闭后会消失，适用于临时数据；localStorage则永久保存在硬盘上，即使浏览器关闭数据也依旧存在。文章通过一个实例代码详细展示了如何使用这两种存储方式，包括存储、获取和清除数据的方法。

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

torage:

客户端存储 session
存在浏览器上的，浏览器关闭信息不存在
硬盘存储local
存在硬盘上，浏览器关闭信息依然存在

示例代码：

     window.localStorage
     window.sessionStorage
     window.sessionStorage.setItem();   //存储的方法
     window.sessionStorage.getItem()   //获取存储的值的方法
     window.sessionStorage.clear();      //清除值

客户端存储案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #t1{
            width: 500px;
            height: 300px;
            border: 1px solid silver;
        }
        #t2{
            width: 500px;
            height: 300px;
            border: 1px solid silver;
            overflow-y: scroll;
        }
        #title{
            width: 400px;
            outline: none;
        }
        #content{
            width: 400px;
            height: 150px;
            resize:none;
            outline: none;
        }
    </style>
</head>
<body>
<div id="t1">
    <ul>
        <li>标题：<br/><input id="title" type="text"></li>
        <li>内容：<br/><textarea id="content"></textarea></li>
        <li>
            <button id="btnsend">发表</button>
            <button id="clear">清除</button>
        </li>
    </ul>
</div>
<div id="t2"></div>
<script>
    var msg={
        title:document.getElementById("title"),
        content:document.getElementById("content"),
        btnsend:document.getElementById("btnsend"),
        clear:document.getElementById("clear"),
        concentData:document.getElementById("t2"),
        sendmsg: function (t,c) {
            //存储代码
            var time=new Date();   //获取当前时间
            var usertime=time.toLocaleString();    //获取年月日时分秒
//            console.log(usertime);
            var times=time.getTime();    //获取键值
            var data={username:"张",title:t,content:c,time:usertime};
//            console.log(data);    //对象型
            window.sessionStorage.setItem(times,JSON.stringify(data));   //data转为JSON字符串类型
            alert("存储成功");
            msg.selectinfo();
        },
        selectinfo: function () {
          msg.concentData.innerHTML="";
            //读取信息
            for(var i=0;i<window.sessionStorage.length;i++){
                var key=window.sessionStorage.key(i);   //获取信息对应键值
//                console.log(key)
                var data=JSON.parse(window.sessionStorage.getItem(key));   //根据键值获取提交信息 转JSON数组类型
//                console.log(data)
                msg.createElements(data);  //传参
            }
        },
        createElements: function (data) {
            //动态创建显示框
            var ul=document.createElement("ul");
            var li=document.createElement("li");
            li.innerHTML="昵称："+data['username']+",标题："+data['title']+",内容："+data['content']+",时间："+data['time'];
            ul.appendChild(li);
            msg.concentData.appendChild(ul);
        }
    };
    //发表按钮监听事件
    msg.btnsend.addEventListener("click", function () {
        var title=msg.title.value;
        var content=msg.content.value;
        msg.sendmsg(title,content);
    });
    msg.clear.addEventListener("click", function () {
        window.sessionStorage.clear();
        msg.selectinfo();   //读取清除后的内容
    });
    window.msg.selectinfo();   //窗口加载时 读取内容
</script>
</body>
</html>

效果显示：
输入后点击发表发表内容显示在下面文本框
在这里插入图片描述