html5 LocalStorage进行离线状态保存

最新推荐文章于 2022-02-21 16:20:13 发布

weixin_34392906

最新推荐文章于 2022-02-21 16:20:13 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

文章标签： json python

原文链接：https://my.oschina.net/ososchina/blog/341806

本文详细介绍了HTML5中四种主要的存储技术：Cookie、localStorage、sessionStorage及webDatabase的使用方法与安全风险，并对比了它们之间的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

在使用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!

转载于:https://my.oschina.net/ososchina/blog/341806