HTML5 本地存儲Web Storage

jopen 10年前發布 | 16K 次閱讀 HTML5 前端技術

Web Storage 功能，顧名思義，就是在web上針對客戶端本地存儲數據的功能，具體來說Web Storage 分為兩種：

sessionStorage:

將數據保存在session對象中，所謂session是指用戶在瀏覽某個網站中，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據。

localStorage:

將數據保存在客戶端本地的硬件設備（通常指硬盤，當然可以是其他的硬盤設備）中，即是瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時，仍然可以繼續使用。

sessionStorage與localStorage區別:

這兩者的區別在于sessionStorage為臨時保存，而localStorage為永久保存。

對比session和cookie的區別主要體現在一下三點：

1.容量大，IE8里面是10M, 不同的瀏覽器支持的大小不一致。

2. 不會隨著會話來傳輸。

3. 讀取和寫入方便，有現成的api

不管是sessionStorage, 還是localStorage, 可使用的API都相同，常用的有如下幾個方法：

1.保存數據： localStorage.setIterm(key,value); sessionStorage.setItem(key, value);

2.讀取數據： localStorage.getIterm(key); sessionStorage.getItem(key);

3.刪除單個數據： localStorage.removeItem(key) sessionStorage.removeItem(key);

4.刪除所有數據： localStorage.clear(); sessionStorage.clear();

兩個都有屬性length 表示Key的個數，也即key長度：

var keylength1 = localStorage.length; var keyLength2 = sessionStorage.length;

如上，key和value都必須為字符串，換言之，Web Storage的API只能操作字符串。

Web storage 的瀏覽器支持情況的判斷：

在使用web storage時，首先判斷是否支持該功能，有些瀏覽器不支持(IE)，只有支持才可以使用，判斷方法如下：

if(window.localStorage){  //或者 window.sessionStorage     
    alert("瀏覽支持localStorage")   
}else{      
    alert("瀏覽暫不支持localStorage")   
}   
  
//或者   
if(typeof window.localStorage == 'undefined') {  //或者 window.sessionStorage   
    alert("瀏覽暫不支持localStorage")   
}

Web Storage使用實例代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Web Storage Demo</title>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
function savesessionStorage(id){sessionStorage.setItem('message',$(id).value);}
function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");}
function savelocalStorage(id){localStorage.setItem("message",$(id).value);}
function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");}
</script>
</head>
<body>
<div>
<h2>sessionStorage Demo</h2>
<p id="sessionMsg"></p>
<input type="text" id="sessionInput" />
<input type="button" value="保存數據" onclick="savesessionStorage('sessionInput');" />
<input type="button" value="讀取數據" onclick="loadsessionStorage('sessionMsg');" />
<br />
<h2>localStorage Demo</h2>
<p id="localMsg"></p>
<input type="text" id="localInput" />
<input type="button" value="保存數據" onclick="savelocalStorage('localInput');" />
<input type="button" value="讀取數據" onclick="loadlocalStorage('localMsg');" />
</div>
</body>
</html>

HTML5 本地存儲Web Storage