HTML5在线状态检测和DOM Storage

除了离线资源缓存外,html5离线应用开发还可能用到以下技术在线状态检测 navigator.onLine navigator.onLine 属性表示当前是否在线.如果为 true, 表示在线:如果为 false, 表示离线.当网络状态发生变化时,navigator.onLine 的值也随之变化.开发者可以通过读取它的值获取网络状态. online/offline 事件当开发离线应用时,通过 navigator.onLine 获取网络状态通常是不够的.开发者还需要在网络状态发生变化时立刻得到…

浅谈 HTML5 的 DOM Storage 机制 (转)

在开发 Web 应用时,开发者有时需要在本地存储数据.当前浏览器支持 cookie 存储,但其大小有 4KB 的限制.这对于一些 Ajax 应用来说是不够的.更多的存储空间需要浏览器本身或是插件的支持,如 Google Gears 和 Flash.不过开发人员需要通过检测当前浏览器所支持的插件类型来使用对应的接口. HTML5 中新引入了 DOM Storage 机制,通过使用键值对在客户端保存数据,并且提供了更大容量的存储空间.本文将详细论述 HTML5 对本地存储的支持,并对存储事件绑定和数…

web离线应用--dom storage

web离线应用--dom storage dom storage是html5添加的新功能,其实也不是什么新的应用,只不过是cookie的放大版本,由于cookie的大小只有4kb,而且在每次请求一个新页面cookie都会被送过去等等...所以html5提供了一种新标准接口,存储容量更大(5M),以键值对存储,很方便使用. dom storage分为local storage和session storage两种方式,这两种方式的操作完全一样,唯一的区别就是session storage在页面关闭时…

利用HTML5开发Android(7)---HTML5本地存储之Database Storage

在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,HTML5还支持通过本地数据库进行本地数据存储,HTML5采用的是"SQLite"这种文件型数据库,该数据库多集中在嵌入式设备上,熟悉IOS/Android开发的同学,应该对SQLite数据库比较熟悉. HTML5中的数据库操作比较简单,主要有如下两个函数: 1.通过openDatabase…

利用HTML5开发Android(4)---HTML5本地存储之Web Storage

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管…

检测一个DOM对象是否为空

我们时常要检测一个DOM对象是否为空. var $jObject = $('#btn'); alert($jObject ); 我们会发现,$jObject 永远不会为空.为什么呢?$ 方法查找对象,始终都会返回一个jQuery 对象的. 解决办法: 我们就要把jQuery对象转换成js对象. ①var dom = $jObect[0]; alert(dom); ②if($jObect.length>0) {alert("not null!");}…

HTML5本地存储之Web Storage应用介绍

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB,感兴趣的朋友可以了解下 Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web…

HTML5本地存储之Web Storage实例篇,最有用的是localStorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5本地存储之Web Storage篇</title> </head> <body> <div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <la…

Augmenting DOM Storage with IE's userData behavior

http://www.javascriptkit.com/javatutors/domstorage2.shtml Augmenting DOM Storage with IE's userData behavior As mentioned on the previous page, when it comes to IE, DOM Storage (sessionStorage and localStorage) is supported in IE8+. This leaves IE7 a…

PHP实现用户在线状态检测

这个是基于ThinkPHP框架的,其他的可以自己根据需求改 1.先新建一个tags.php文件,放在配置目录Conf下. <?php /* * 添加行为 * */ return array( 'action_begin' => array('OnlineCheck'), ); ?> 2.定义具体的功能 <?php /* * 定义行为: 在线更新 */ class OnlineCheckBehavior extends Behavior { //…

大熊君学习html5系列之------Online && Offline（在线状态检测）

一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, online,offline 事件用来监测浏览器处于在线或离线状态.HTML5提出的离线存储,web应用程序可以在不连接互联网的情况下满足用户的部分需求,…

JS之BOM、客户端检测和DOM

这是第八章到第十二章的内容,粗略浏览过一遍. 一.BOM 浏览器对象模型.包括了window.location.navigator.screen和history对象. window:核心对象 1.JS访问浏览器窗口的一个借口 2.全局作用域Global对象,所有在全局作用域中生命的变量,函数都会变成window对象的属性和方法.(全局变量不能通过delete删除,而window对象),如果页面中包含框架,并且保存在frames集合中.在frames集合中,可以通过数值索引(从0开始,从左至右,从…

HTML5 本地存储（Web Storage）

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会被清除注意: 1)只要清除浏览器cookie,两种存储方式的数据都会被清除 2)对于不同的网站,数据存储于不同的区域,各网站只能访问其自身的数据 3)浏览器之间的数据是各自独立的(比如Firefox中使用localStorage存储一组数据,在Chrome浏览器下是无法读取的) 1.目前大部分的浏…

HTML5之客户端存储（Storage）

关于客户端存储技术 storage 一.关于客户端(浏览器)存储技术浏览器的存储技术第一个能想到的应该就是cookie,关于cookie本身出现的初衷是为了解决客户端识别,可存储信息量小(4k左右),并且每次网络请求都会被请求协议携带发送到服务器,这在一定程度上是比较浪费网络资源,损耗性能. 在HTML5中提供了一个新的客户端存储技术Storage: cookie与storage的异同: 相同点:同样受同源策略影响,只有在域名一致的情况下才能查看到对应的数据. 不同点: 1.cookie的数据…

HTML5 高级系列：web Storage

前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同,存储时间不同. localStorage 的数据保存在本地硬件上,可以永久保存,可以手动调用api清除数据.sessionStorage 保存在 session 对象中,会在浏览器关闭时被清除. web Storage 的大小在浏览器上是有限制的,不同浏览器大小会有区别,在主流浏览器中,大小约为 5…

HTML5 MutationObserver检测页面劫持

好久没写博客了,业务一直在变化,陆陆续续的做了很多web app,被业务流淹没就很少有机会去反思,前端技术发展如此之快,常常有种不学则退的恐慌,一种技术还没吃透就涌出新的技术,然后一波人又打着各种旗帜去宣传,想偷懒都不行,大脑完全不够用. Nodejs,AngularJS,vuejs,React,grunt,gulp,webpack...Fuck! HTML5的水很深很深,感觉还有很多技术没有挖掘和使用.无意中发现HTML5 DOM4级MutatioObserver方法,可以检查页面中的DOM是…

Html5的本地储存 Web Storage

Html5 中的存储包括两种:sessionStorage 和 localStorage sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. web storage和cookie的区别 Web Storage的概念和c…

【HTML5开发系列】DOM及其相关

对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM把Javascript和HTML文档的结构和内容连接起来,通过DOM可以控制HTML的行为.DOM是一个树状结构,如下图所示. DOM Level和兼容性问题 DOM Level (即DOM等级)是W3C标准化过程中的版本号,在大多数情况下可以忽略他们. DOM0级(DOM Level 0) 实际上DOM0级标准是不存在的.所谓DOM0级只是DOM历史坐标中的一个参…

HTML5 离线功能介绍

HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线存储和工作线程等功能.其中一个新特性就是对离线应用开发的支持.在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能:离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件.这样,浏览器才能在在线状态时,把这些文件缓存到本地.此后,当用户离线访问应用程序时,这些资源文件…

使用HTML5开发离线应用 - cache manifest

HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线存储和工作线程等功能.其中一个新特性就是对离线应用开发的支持. 在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能: 离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件.这样,浏览器才能在在线状态时,把这些文件缓存到本地.此后,当用户离线访问应用程序时,这些资源…