HTML5中的离线存储
存储:客户端存储 session
硬盘存储 local
1.客户端存储
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类型
其他用法和客户端存储相似