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>
讀者可以到瀏覽器中去查看存儲的數據,方法是 以Chrome爲例:F12-》application-》storage-》localstorage或者sessionstorage,注意一個是永久存儲,另一個是會話存儲。
下面我們來做一個簡單的留言板。目的是用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>
以上就是關於本地存儲的一些介紹,歡迎大家互相溝通交流!請多指教