离线存储（制作留言板）

最新推荐文章于 2021-05-30 19:02:49 发布

qq_43181885

最新推荐文章于 2021-05-30 19:02:49 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/qq_43181885/article/details/82690752

版权

本文介绍了离线存储的两种主要方式——客户端存储的sessionStorage和硬盘存储的localStorage。通过使用sessionStorage.setItem()和sessionStorage.getItem()进行数据的存取，文章指出sessionStorage的数据会在浏览器关闭后丢失，而localStorage则能保存数据，即使浏览器关闭。

摘要由CSDN通过智能技术生成

离线存储

离线存储分为两种：客户端存储（sessionStorage）和硬盘存储（localStorage）

sessionStorage.setItem(); //进行数据存储
sessionStorage.getItem(key,data);//根据key值读取数据
不同：sessionStorage关闭当前当前浏览器数据丢失
localStorage关闭当前浏览器数据会被保存

<style>
        .block {
            width: 700px;
            height: auto;
            border: 1px solid black;
            margin:0 auto;
        }
        textarea{
            resize:none;
            width:600px;
            height:150px;
        }
        #ctc{
            font-size:14px;
            margin:25px 150px;
        }
        .ctctxt{
            padding:10px 0px;
        }
        .ctctxt img{
            width:50px;
            height:50px;
        }
        .ctctxt span{
            color:red;
        }
    </style>
</head>
<body>
<div class="block">
    <ul>
        <li>标题：<input type="text" id="txt"></li>
        <li>内容：</li>
        <li><textarea id="content"></textarea></li>
        <li><button id="btn">发表</button><button id="clear">清除</button></li>
    </ul>
    <div id="ctc">

    </div>
</div>
<script>
    /*//离线存储方式  客户端存储 硬盘存储  key,data
     硬盘存储 localStorage
     sessionStorage.setItem();    //setitem进行存储
     sessionStorage.getItem();   //读取数据  根据key值*/
    var btn=document.getElementById("btn");
    var txt=document.getElementById("txt");
    var content=document.getElementById("content");
    btn.onclick=function(){
        //构建一个JSON数据格式
        var time=new Date();
        var data={"face":"./img/logo.png","nickname":"李佩","title":txt.value,"content":content.value,"time":time.toLocaleString()};
        localStorage.setItem(time.getTime(),JSON.stringify(data));
        alert("发表成功");
        showmsg();
    }
    clear.onclick=function(){
        localStorage.clear();
        showmsg();
    }
    showmsg();
    function showmsg(){
        ctc.innerHTML="";
        //根据数据的长度去取对应的key值
        var length=localStorage.length;
        for(var i=length-1;i>=0;i--){
            var key=localStorage.key(i);
            var data=JSON.parse(localStorage.getItem(key));
            var str='<div class="ctctxt">'+
                    '<img src="'+data.face+'">'+
                    '昵称：<span>'+data.nickname+'</span>'+
                    '标题：<span>'+data.title+'</span>'+
                    '时间：<span>'+data.time+'</span><br/>'+
                    '内容：'+
                    '<div>'+
                    '<span>'+data.content+'</span>'+
                    '</div>'+
                    '</div>';
            ctc.innerHTML+=str;
        }
        /*sessionStorage.getItem();*/
    }
</script>