Web存儲
兩種方式
- localStorage:沒有時間限制的數據存儲
- sessionStorage:針對一個session的數據存儲
與cookie的對比
- cookie不適合大量數據的存儲，因爲它們由每個服務器的請求來傳遞，這使得cookie速度慢而且效率也不高
localStorage
- localStorage 方法存儲的數據沒有時間限制。也就是說，數據不清空的話，一直可以使用。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStroge</title>
<script src="app.js"></script>
</head>
<body>
<textarea style="width: 200px; height: 200px;" id ="ta" ></textarea>
<button id="btn">save</button>
</body>
</html>
app.js
var ta;
var btn;
window.onload = function(){
ta = document.getElementById("ta");
if(localStorage.text){
ta.value = localStorage.text;
}
btn = document.getElementById("btn");
//onclick btn的點擊事件
btn.onclick = function(){
//alert(ta.value);
localStorage.text = ta.value;
}
}
以上是簡單的實現HTML5的新特性Web存儲localStorage
sessionStorage
- sessionStorage：針對一個session進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。
實現代碼
sessionStorage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSessionStroge</title>
<script src="sessionapp.js"></script>
</head>
<body>
<span id="txt">0</span>
<button id="addbtn">Add</button>
</body>
</html>sessionapp.js
var num = 0;
var txt;
window.onload = function(){
txt = document.getElementById("txt");
btn = document.getElementById("addbtn");
if (sessionStorage.num){
num = sessionStorage.num;
}
btn.onclick = function(){
num++;
sessionStorage.num = num;
showNum();
}
function showNum(){
txt.innerHTML = num;
}
}