Html5 离线缓存

最新推荐文章于 2024-06-15 11:43:41 发布

易安sparkle

最新推荐文章于 2024-06-15 11:43:41 发布

阅读量175

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/weixin_43675447/article/details/89325843

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.sessionStorage
存储在浏览器上

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

2.localStorage
存储在本地中

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

案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
        }
        .block input {
            width: 400px;
            outline: none;
        }
        .block textarea {
            width: 400px;
            height: 150px;
            resize: none;
        }
        .block_2 {
            width: 500px;
            height: 200px;
            border: 1px solid silver;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<div class="block">
    <ul>
        <li>标题：<br><input type="text" id="title"></li>
        <li>内容：<br><textarea id="content"></textarea></li>
        <li>
            <button id="btnsend">发表</button>
            <button id="btnclear">清除</button>
        </li>
    </ul>
</div>
<div class="block_2">

</div>
<script>
    var msg={
        t_txt:document.getElementById("title"),
        c_txt:document.getElementById("content"),
        btnsend:document.getElementById("btnsend"),
        contentData:document.getElementsByClassName("block_2")[0],
        btnclear:document.getElementById("btnclear"),
        sendmsg:function(t,c){
            //存储代码
            var time=new Date();
            var usertime=time.toLocaleString();
            var times=time.getTime();  //时间的总毫秒数，在这里作为键值传的时间
            var data={username:"毛豆",title:t,content:c,time:usertime};
            window.sessionStorage.setItem(times,JSON.stringify(data));
            alert("存储成功！");
            msg.selectinfo();
        },
        selectinfo:function(){
            msg.contentData.innerHTML="";
            //读取浏览器所存储的值
            for(var i=0;i<window.sessionStorage.length;i++){
                var key=window.sessionStorage.key(i);
                var datamsg=JSON.parse(window.sessionStorage.getItem(key));
                msg.createElement(datamsg);
            }
        },
        createElement:function(Data){
            //动态创建dom元素
            var ul=document.createElement("ul");
            var li=document.createElement("li");
            li.innerHTML="昵称："+Data['username']+"，标题："+Data['title']+"，内容："+Data['content']+"，时间："+Data['time'];
            ul.appendChild(li);
            msg.contentData.appendChild(ul);
        }
    };
    msg.btnsend.addEventListener("click",function(){
        var title=msg.t_txt.value;
        var content=msg.c_txt.value;
        msg.sendmsg(title,content);
    });
    msg.btnclear.addEventListener("click",function(){
        window.sessionStorage.clear();
        msg.selectinfo();
    });
</script>
</body>
</html>

示例如下：
在这里插入图片描述
若使用sessionStorage存入数据，关闭浏览器或关机，数据不会被存入；
若使用localStorageStorage存入数据，关闭浏览器或关机，数据会被存入，

易安sparkle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5 离线缓存

1.sessionStorage存储是存在浏览器上的window.sessionStorage.setItem(); //用来存储的方法window.sessionStorage.getItem(); //获取存储的值window.sessionStorage.clear(); //清除值...
复制链接

扫一扫

专栏目录