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!