《HTML5移动web开发指南》——笔记3(本地存储)

HTML5本地存储规范中,定义两个API 

1)Web Storage

2)本地数据库 Web SQL Database


以下主要介绍Web Storage:

Web Storage的作用是在网站中把有用的信息存储到本地的计算机或者移动设备上,根据实际需求从本地获取信息。

Web Storage提供两种存储类型API接口:sessionStoragelocalStoragesessionStorage在会话期间有效,localStorage永久存储在本地

(注:大部分游览器目前都是这种特性)


代码严谨性:使用之前检查游览器是否支持Web Storage

if(window.localStorage){
}
if(window.sessionStorage){
}

代码安全性
:localStorage是域内安全的。(但各个游览器之间的数据是独立的)

localStorage属性:length

localStorage方法:setItem和getItem方法——赋值和取值

                                   removeItem方法删除一个key/value对

                                   clear方法删除所有的键值对


localStorage.setItem("name","啦啦啦");
localStorage.getItem("name");
//如果localStorage存储列表中只存在一个item,可以通过index去读取name值
localStorage.key(1);
//删除指定key为“name”的item
localStorage.removeItem("name");
//删除localStorage所有key/value键值对items
localStorage.clear();

Storage 事件监听

HTML5 Web Storage API 内置的事件监听器能对数据进行监听。

Storage事件的借口代码如下所示:

interface StorageEvent:Event {
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage?storageArea;
void initStrageEvent(in  DOMString typeArg,
                                in boolean canBubbleArg,
                                in boolean cancelableArg,
                                in DOMString keyArg,
                                in DOMString oldValueArg,
                                in DOMString newValueArg,
                                in DOMString urlArg, 
                                in Storage storageAreaArg);
};

  • key属性表示存储中的键名
  • oldValue属性:数据更新前的键值(如果数据是新添加的,该值为null)
  • newValue属性:数据更新后的值(如果数据通过removeItem删除,该值为null)

若调用clear方法,则key、oldValue和oldValue的值都是null

  • url属性:记录Storage时间发生时的源地址
  • StorageArea属性指向事件监听对应的Storage对像
storage原意为仓库、储藏间 , StorageArea则很形象的指向这个仓库对应的位置或者说空间







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
内容简介编辑 本书是为从未接触过HTML5新技术但同时又对移动Web技术感兴趣的读者而编写的。如果你有一定的HTML开发经验,将会更容易掌握HTML5知识。 同时,如果你是如下几类人群之一,那么本书非常适合你阅读。 有一定基础或者未来计划的职业是Web前端开发工程师。 具有一定HTML基础的UI设计师。 Web项目中的项目经理以及策划人员。 对手机Web开发技术感兴趣的开发者。 开设计算机课程的高等院校及培训机构的师生。 此外,本书也适合熟悉.net、Java、PHP等后端Web技术的开发者阅读。 前言编辑 你是否使用过智能手机浏览真正的网页? 你在使用智能手机浏览网页时会感到困惑吗? 你是否想知道智能手机上的Web网页是如何实现的? 如果你存在以上的问题并想解决,那么阅读本书将是你的最佳选择。 HTML5从讨论到实践 现今,HTML5已经成为互联网的热门话题之一。2011年的HTML5发展得非常快,各大浏览器开发公司如Google、苹果、微软、Mozilla及Opera的最新版本浏览器都纷纷支持HTML5标准规范。在桌面端Web技术领域,HTML5标准的强大已经开始威胁Adobe公司的Flash在Web上的统治地位。然而,在移动Web技术领域,由于历史的原因,HTML5标准才刚刚起步,但随着HTML5和CSS3逐渐兴起,其强大的特性在移动Web应用当中得到了非常好的发挥。 随着HTML5网站、HTML5应用软件及HTML5游戏不断涌现,让我们更加有理由相信未来HTML5技术将会成为我们在计算机行业当中必备的专业知识。因此,我希望能够借助此书帮助国内的Web开发从业者或者即将在此行业发展的读者,在学习HTML5的同时也能掌握移动Web技术。 为什么写作本书 2011年是HTML5实践的一年,无论是国外的开发者,还是国内的开发者,都热衷于研究HTML5新标准究竟能给我们带来什么。由于HTML5技术非常新,国内很多开发者在实践过程中经常遇到非常多的困难,例如如何入门与解决BUG等常见问题,都很难找到解答问题的中文资源。因此,开发者们亟需一本能够带领他们入门的HTML5书籍。 2011年也是移动互联网高速发展的一年,随着iPhone、Android等智能设备的迅速普及,以及Web技术跨平台等优点更广泛的为人所知,移动Web技术逐渐成为大家关注的新热点之一。国内移动Web技术中文资源相对缺乏,社区尚待不断发展,很多开发者仍处于探索研究阶段。同时也有部分准备进入移动Web开发领域的新手,苦于入门困难,而难以上手。因此,一本介绍移动Web开发的书籍便成为开发者最渴望的资源之一。 基于上述两种原因,作者认为需要编写一本能够利用HTML5新技术开发移动Web应用的入门书籍,令广大读者在真正学习到HTML5新技术的同时,也能快速掌握移动Web开发的基础知识。 关于本书 本书不足之处在于,本书并没有全面地介绍HTML5技术,但这并不代表HTML5的其他知识点不能适用于移动Web开发。毕竟HTML5是一个新生事物,它的标准规范仍然在制定之中,而它的不断发展对于未来的移动Web技术的发展,必将有很大的推动作用。 本书在编写过程中参考了下列网站、社区及官方文档等,并引用了部分内容。  HTML5研究小组官方网站  Sencha Touch官方接口文档及demo例子  jQuery Mobile官方接口文档  PhoneGap官方网站及接口文档  PhoneGap中国读者对象 致 谢 在本书的写作过程中,得到了很多人士的悉心帮助。在此谨向给予本书帮助的诸位及我所参考的网站社区、官方网站表示诚挚的感谢。特别感谢HTML5研究小组负责人田爱娜女士给予了很大的帮助和支持,她推荐的很多专业人士对本书提供了很多中肯的建议。 另外,由于时间及水平有限,在本书编写过程中可能存在一些对HTML5移动Web技术认识不全面或者表述错漏的地方,敬请读者批评指正。作者的联系邮箱为,新浪微博是@三桥sankyu。谨以最真诚的心希望能与读者共同交流,共同成长。 作品目录编辑 第1章 移动互联网时代的Web技术 1 第2章 移动设备HTML5页面布局 12 第3章 HTML5规范的本地存储 23 第4章 移动Web的离线应用 34 第5章 移动设备的常见HTML5表单元素 40 第6章 移动Web界面样式 48 第7章 Geolocation地理定位 74 第8章 轻量级框架jQuery Mobile初探 79 第9章 重量级富框架Sencha Touch入门 187 第10章 跨平台的PhoneGap应用介绍 273 第11章 构建基于HTML5的生活轨迹Web App 337 第12章 进阶之路 366

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值