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類型
其他用法和客戶端存儲相似