HTML5 本機存放區

HTML5的本地化儲存標準主要有以下3類：

(1) Web Storage 

(2) Web SQL Database  

(3) IndexedDB

本文地址: http://blog.csdn.net/chen_zw/article/details/23362511

一、Web Storage 

Web Storage是目前得到支援最廣泛的HTML5本機存放區規範，IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+，以及iPhone 2+和Android 2+都已經支援Web Storage，Web Storage類似於HTML4的cookie，但cookie最大隻支援4k，而且每次發起一個新的請求，會自動把該域下的所有cookie都發送到服務端。

1. Web Storage的主要有以下特點：

(1) 提供了更大的儲存空間。cookie的儲存限制在了4k之內, 而Web Storage官方建議為每個網站5MB。

(2) cookie有一個機制，就是在每次用戶端請求伺服器的時候都會將cookie發送給伺服器，這無疑會做很多不必要的操作，因為並不是每次請求伺服器都需要cookie的所有資訊，而web storage很好的解決了這個問題，它不是採取自動發送的方式，這樣就減少了不必要的工作。

(3) Web Storage賦值儲存的都是字串類型的，也就是說如果你要儲存數位話，那麼擷取到Storage中儲存值後需要進行類型轉換。

eg:

window.localStorage.setItem('count', 8);  //數值賦值console.log(window.localStorage.count + 8);  //結果並非16,而是88console.log(parseInt(window.localStorage.count) + 8);  //須先轉換成整數型,再進行相加,結果為16

2. Web Storage包括以下2個儲存物件：

2.1  localStorage

localStorage 用於持久化的本機存放區，它沒有時間限制，除非主動刪除資料，否則資料是永遠不會到期的。

可以使用以下語句判斷瀏覽器是否支援localStorage：

 if(!window.localStorage==false){  alert("瀏覽器支援localStorage");  }else{  alert("瀏覽器不支援localStorage,請升級瀏覽器版本！");  }

localStorage的操作非常簡單，常用的方法如下：

(1) window.localStorage.key = value;
(2) window.localStorage.setItem(key, value);
(3) window.localStorage.getItem(key);
(4) window.localStorage.removeItem(key);
(5) window.localStorage.clear();

eg：

<script type="text/javascript">    /*****賦值樣本****/window.localStorage.uin = 'yunlives';  //賦值window.localStorage.nick ='夜之子';//等同於window.localStorage.setItem('uin', 'yunlives');  //賦值window.localStorage.setItem('nick','夜之子');/*****取值樣本*****/console.log(window.localStorage.uin);console.log(window.localStorage.nick);//等同於console.log(window.localStorage.getItem('uin'));console.log(window.localStorage.getItem('nick'));        //結合JSON.stringify使用更強大        var userObj = {'uin': 'yunlives', 'nick': '夜之子'};        window.localStorage.setItem('user', JSON.stringify(userObj));        JSON.parse(window.localStorage.getItem('user')).nick;  // 結果顯示'夜之子'        /******移除項******/window.localStorage.removeItem('uin');/*****清空****/window.localStorage.clear();</script>

NOTE：（1）對於某一個域下來說，local storage是共用的（多個視窗共用）

2.2 SessionStorage

SessionStorage 針對一個 session 進行資料存放區。當使用者關閉瀏覽器視窗後，資料會被刪除。 

可以使用以下語句判斷瀏覽器是否支援localStorage：

 if(!window.sessionStorage==false){  alert("瀏覽器支援sessionStorage");  }else{  alert("瀏覽器不支援sessionStorage,請升級瀏覽器版本！");  }

sessionStorage的使用方法同localStorage,這裡省略....

NOTE：（1）sessionStorage所儲存資料的生命週期，和Session類似，關閉瀏覽器（或標籤頁）後資料就不存在了。但重新整理頁面或使用“前進”、“後退按鈕”後sessionStorage仍然存在。

（2）session storage每個視窗的值都是獨立的（每個視窗都有自己的資料），它的資料會隨著視窗的關閉而消失，視窗間的sessionStorage也是不可以共用的。

參考文章：HTML5 本機存放區