webstorage 和 本地數據庫。Web Storage 是對H4中的cookie機制的改善。由於cookie存在很多缺陷，H5決定不再使用它，轉而使用webstorage。 本地數據庫，顧名思義，就是在客戶端本地建立一個數據庫，把服務器端的部分數據拿到本地存儲，這樣就可以爲服務器減輕壓力，加快訪問速度（畢竟，你知道運行本地項目和訪問服務器速度上的差別！）。
在H4中，cookie存儲永久數據存在這樣幾個問題：1cookie大小限制爲4kb，2cookie是隨着HTTP一起發送的，浪費了一定的帶寬。3cookie也不是很容易用。
H5中的本地存儲，提供兩種，sessionstorage 和localstorage。
sessionstorage：將數據保存在session中。（有的小夥伴不知道什麼是session，在這裏科普一下：當你打開一個瀏覽器，那麼一個session就建立了，從你打開瀏覽器開始，知道你關閉這個瀏覽器，這個session都是存在的，session可以保存你在這段時間裏的任何數據。）
localstorage：將數據存儲在硬盤設備中。也就是我們存的東西，你關了瀏覽器，即使是關了電腦，也是存在的。就像存了一個電影，啥時候看都OK。
在目前：Firefox3.6+，Chrome6+，Safari5+，opera10.5+，IE8+都是支持的。
下邊來點例子，稍微的爽一下下，不會後端怎麼了，該存存，該取取，前端也是可以的~~~不過，有一點要說明，前端是能幹，不過，安全性真是差太多，重要的數據可不要放前端哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webstorage存儲和讀取</title>
</head>
<body>
<p id="msg"></p>
請輸入數據：<input type="text" id="input"> <br>
<input type="button" οnclick="saveData('input')" value="保存數據"> <br>
<input type="button" οnclick="loadData('msg')" value="讀取數據">
</body>
<script>
/*session存儲開始*/
function saveData(id) {
var target=document.getElementById(id);
var str=target.value;
sessionStorage.setItem('message',str); //將str存儲到message中
}
function loadData(id) {
var target=document.getElementById(id);
var msg=sessionStorage.getItem('message');//從session中拿到message
target.innerHTML=msg;
}
/*session存儲結束*/
/*localstorage存儲開始*/
function saveData1(id) {
var target=document.getElementById(id);
var str=target.value;
localStorage.setItem('message',str); //將str存儲到message中
}
function loadData1(id) {
var target=document.getElementById(id);
var msg=localStorage.getItem('message');//從session中拿到message
target.innerHTML=msg;
}
/*localstorage存儲結束*/
</script>
</html>下面我們來做一個簡單的留言板。目的是用storage來存儲大量的數據。
我們要顯示文本內容，以及時間日期。在這裏，我們的數據必須是以鍵值對的形式存儲。我們讓文本內容作爲鍵值，日期時間作爲鍵名。爲什麼呢？因爲時間不會重複！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<textarea name="" id="demo" cols="50" rows="10"></textarea> <br>
<input type="button" value="追加" οnclick="saveData('demo')"> <br>
<input type="button" value="初始化" οnclick="clearData('demo')">
<hr>
<p id="msg"></p>
</body>
<script>
window.οnlοad=function () {
loadData('msg');
}
function saveData(id) {
var date=document.getElementById(id).value;
var time=new Date().getTime();
localStorage.setItem(time,date);
alert("保存完成！");
loadData('msg');
}
function loadData(id) {
var result='<table border="1">';
for (var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
var date=new Date();
date.setTime(key);
var dateStr=date.toLocaleString();
result+='<tr><td>'+value+'</td><td>'+dateStr+'</td></tr>';
}
result+='</table>';
var target=document.getElementById(id);
target.innerHTML=result;
}
function clearData() {
localStorage.clear();
alert("清除數據");
loadData('msg');
}
</script>
</html>
