文档章节

html5 LocalStorage进行离线状态保存

IamOkay
 IamOkay
发布于 2014/11/07 11:29
字数 683
阅读 88
收藏 1

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


© 著作权归作者所有

IamOkay

IamOkay

粉丝 203
博文 483
码字总数 403198
作品 0
海淀
程序员
私信 提问
关于HTML5应用现状与前景的思考

现在的 HTML5 就像当年崭露头角时的 Ajax,有人在做,但不知道叫它什么。最近,苹果在 HTML5 上大做文章,而著名的 Web 设计师 Eric Meyer 则提出了 Web Stacks 的概念。Alex Kessinger 是 ...

红薯
2010/06/20
756
1
使用 HTML 5 创建 Flex 的离线应用程序

本文转自 IBM developerWorks 简介: 目前 HTML 5 技术大兴其道,很多厂商都开始围绕着 HTML 5 技术在开发下一代 Web 应用。难道 HTML 5 真的会终结当前同样火热的 RIA 技术吗? 事实上二者完...

IBMdW
2011/06/11
729
0
[IBM DW] 使用 HTML5 开发离线应用

简介: Web2.0 技术鼓励个人的参与,每个人都是 Web 内容的撰写者。如果 Web 应用能够提供离线的功能,让用户在没有网络的地方(例如飞机上)和时候(网络坏了),也能进行内容撰写,等到有网...

红薯
2010/11/28
740
2
十道或许你不熟练的前端HTML5的经典面试题

1.什么是HTML5?  答:HTML5是最新的HTML标准。   注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等。。。。 设计目的   HTML5的设计目的是为了在移动设备上支...

懿左左
2018/06/29
0
0
华丽丽的HTML5新特性

Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。作为下一代互联网标准,HTML5自然也是备受期待和瞩目,技 术人员、设计者、互联网爱好者们都在热议HTML5究竟能带来...

小编辑
2011/07/13
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

spring boot actuator

actuator 是监控系统健康的工具,引入 spring-boot-starter-actuator会暴露一些endpoint. 可通过如下配置来配置这些endpoint的基本配置: 可通过http:${url}:28081/management/actuator/*来访...

ZH-JSON
12分钟前
2
0
9.特殊权限 软连接 硬链接

6月7日任务 2.18 特殊权限set_uid 2.19 特殊权限set_gid 2.20 特殊权限stick_bit 2.21 软链接文件 2.22 硬连接文件 2.18 特殊权限set_uid 会发现有些文件的前三位并不是rwx而是rws,而s就代表...

oschina130111
24分钟前
1
0
好程序员web前端分享如何自学前端?步骤是什么?

好程序员web前端分享如何自学前端?步骤是什么?简单粗暴直接上学习流程。 1、学习HTML+CSS基础 HTML5新特性和CSS3 这个部分主要是需要记忆的知识点比较多,建议大家在学习的时候多加练习,最...

好程序员官方
25分钟前
2
0
创龙基于TI TMS320C6748定点/浮点DSP C674x + Xilinx Spartan-6 FPGA开发板

TL6748F-EVM是一款基于广州创龙SOM-TL6748F核心板设计的开发板,底板采用沉金无铅工艺2层板设计,它为用户提供了SOM-TL6748F核心板的测试平台,用于快速评估SOM-TL6748F核心板的整体性能。 ...

Tronlong创龙
31分钟前
1
0
8年前诞生于淘宝,细数阿里云RPA 的前世今生

9月10日,踏入55岁的马云正式卸任阿里巴巴董事局主席一职,由阿里巴巴集团CEO张勇接任。公寓创业、西湖论剑、美国敲钟,从成立到登顶中国最值钱的公司,阿里巴巴只用了20年。 阿里云RPA,201...

阿里云官方博客
35分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部