HTML5中的离线存储

存储：客户端存储　　session
　　　硬盘存储　　local

１.客户端存储

window.sessionStorage　存在浏览器上的，浏览器关闭后不在保留数据，用于临时保存数据

存储的属性

		window.sessionStorage.setItem("key", "value");  /!*用来存储的方法*!/
        window.sessionStorage.getItem("key")   //获取存储的值
        window.sessionStorage.clear("key");    //清除值

localStorage 只支持 string 类型的存储。
案例1 本地发送和接受文本

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .t1 {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
        }

        .t1 input {
            width: 400px;
            outline: none;

        }
	  .t1 textarea {
            width: 400px;
            height: 150px;
            resize: none;
            outline: none;

        }
	.t2 {
            width: 500px;
            height: 300px;
            border: 1px solid silver;
            overflow-y: scroll;//产生一个纵向的滚动条
        }
    </style>
</head>
<body>
<div class="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 class="t2"></div>
<script>
    var msg={//用JSON对象写
        title:document.getElementById("title"),
        content:document.getElementById("content"),
        btn:document.getElementById("btnsend"),
        clearbtn:document.getElementById("clear"),
        contentData:document.getElementsByClassName("t2")[0],
        sendmsg:function(t,c){
            var time=new Date();
            var usertime=time.toLocaleString();//转换为当地时间
            var times=time.getTime();//getTime() 方法可返回距 1970 年 1 月 1 日毫秒数。
            var data={username:"仙女",title:t,content:c,time:usertime};
            window.localStorage.setItem(times,JSON.stringify(data));//JSON.stringify()的方法是将一个对象或者数组转换为一个JSON字符串
            /*alert("存储成功");*/
            msg.selectinfo();
       },
        selectinfo:function(){
            msg.contentData.innerHTML="";
            for(var i=0;i<window.localStorage.length;i++){
                var key=window.localStorage.key(i);//键值
                var data=JSON.parse(window.localStorage.getItem(key))//将字符串转成json对象
                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.contentData.appendChild(ul);
        }

    };
    msg.btn.addEventListener("click",function(){
        var title=msg.title.value;
        var content=msg.content.value;
        msg.sendmsg(title,content)
    })
    msg.clearbtn.addEventListener("click",function(){
        window.localStorage.clear();
        msg.selectinfo();
    })
    window.msg.selectinfo();
</script>
</body>
</html>

2.硬盘存储

window.localStorage  存在硬盘上的，浏览器关闭或者电脑重启后，数据依旧存在

同上，只存储string类型
其他用法和客户端存储相似

HTML5中的离线存储

HTML5中的离线存储

猜你喜欢