html5 LocalStorage進行離線狀態保存

在使用html5中localStorage，sessionStorage,cookie或者webDatabase（目前僅pc上部分瀏覽器支持）進行離線數據存儲，轉場數據交互，好比保存遊戲狀態，網絡遊戲脫機體驗，另外，有時候在網絡鏈接斷開時爲了可以正常瀏覽網站通常使用 manifest緩存，這裏manifest暫時不說了，有興趣能夠本身去百度檢索。

1.Cookie的用法和風險

function setCookie(c_name,value,expiredays) //設置cookie
{
   var exdate=new Date()
   exdate.setDate(exdate.getDate()+expiredays)
   document.cookie=c_name+ "=" +escape(value)+
   ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function getCookie(c_name)  //讀取cookie
{
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=")
      if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1 
        c_end=document.cookie.indexOf(";",c_start)
        if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
        } 
      }
    return ""
}

function checkCookie() //檢查cookie
{
    username=getCookie('username')
     if (username!=null && username!="")
      {
         alert('Welcome again '+username+'!')
      }
    else 
      {
      username=prompt('Please enter your name:',"")
      if (username!=null && username!="")
        {
        setCookie('username',username,365)
        }
      }
}

風險分析:cookie的最大缺陷是和瀏覽器聯繫過於緊密，有時形成cookie沒法保存，數據容易被跨域獲得等衆多已知的問題，因此通常來講安全性數據要慎重保存，不過有個好處是cookie幾乎支持全部瀏覽器。

2.localStorage的用法和風險分析

var json_data = {id:12,name:"yang",email:"aaa@aaa.com"};
localStorage.setItem("json_data",JSON.stringify(json_data));

var json_data = JSON.parse(localStorage.getItem("json_data"));

for(var i=localStorage.length - 1 ; i >=0; i--)
{
    with(document)
    {
     writeln((localStorage.getkey(i)+'='+localStorage.getItem(localStorage.key(i))+'<br/>');
    }
}
//localStorage.removeItem(key);
//localStorage.clear();

分析:localStorage比起Cookie來講依賴瀏覽器的行爲要少的多，另外localStroge不支持跨域，因此保證了數據的獨立性，能夠持久緩存，比Cookie安全性更好，但沒有sessionStorage好。

3.sessionStorage用法和風險分析

var json_data = {id:12,name:"yang",email:"aaa@aaa.com"};
sessionStorage.setItem("json_data",JSON.stringify(json_data));

var json_data = JSON.parse(sessionStorage.getItem("json_data"));

for(var i=localStorage.length - 1 ; i >=0; i--)
{
    with(document)
    {
     writeln((sessionStorage.getkey(i)+'='+sessionStorage.getItem(localStorage.key(i))+'<br/>');
    }
}
//sessionStorage.removeItem(key);
//sessionStorage.clear();

分析：用法幾乎和localStorage沒有多少差異，區別在於sessionStorage雖然也保存在瀏覽器一端，但當瀏覽器關閉後sessionStorage會被及時清除，因此sessionStorage適合保存 安全性高的數據，轉場數據。

4.在html5中提供了監聽存儲的事件onStorage(注意：因爲我的水平緣由，一直沒測試到下面代碼運行過)

function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) 
        {
            elm.addEventListener(evType, fn, useCapture);//DOM2.0
            return true;
        }
        else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);//IE5+
            return !!r;
        }
        else {
            elm['on' + evType] = fn;//DOM 0
        }
}

addEvent(window,'storage',function(e){ 
    alert('window.storage event is fired');
},true);

addEvent(window.document,'storage',function(e){ 
    alert('window.storage event is fired');
},true);

try doing it!