Kidney日拱一卒JavaScript系列Chapter10 Other Client-side Technology

Chapter 10 其它客户端技术

1、客户端检测Client Detection

客户端检测是跨浏览器开发中用到一种处理兼容性问题的开发手段。常用的有三种方式,按照使用的优先级排列分别而是:能力检测>怪癖检测>用户代理检测。

1.1 能力检测(feature detection)

检测浏览器是否支持某项属性或方法。

基本形式:

if(capability){

do something with this capability // 不能是另外一个

}

先检测最常用的,再检测特殊的。保证常用的先执行,可以使检测次数最小化。

另外需要注意,检测能力不代表检测浏览器,二者不可混淆。

检测某种能力是否存在,是强度最低的一种方式,更强的方式是检测能力的类型(使用typeof运算符)或者检测多种能力的组合。

1.2 怪癖检测(quirks detection)

检验浏览器存在的某种缺陷。通过运行一段代码,如果能够运行,则返回true,如果因为存在某种缺陷导致这段代码不能运行或者返回假值,则返回false。

1.3 用户代理检测

通过检测用户代理字符串(navigator.userAgent)中特定浏览器携带的信息,来检测浏览器(或渲染引擎)的类型。

用户代理的检测还包括:平台(操作系统)、移动设备类型等。

2、客户端储存Client Storage

       H5的一个目标是实现离线应用,而要做到这一点,就必须有一块本地空间用于保存数据。此外,出于减少资源请求,提高资源利用率等原因,也需要用到客户端储存技术。

客户端储存的信息有两类,一类是应用缓存(application cache),其原理是通过一份描述文件列出需要缓存的资源,并在浏览器缓存区域中储存。

另一类是数据储存,储存数据的方式有许多种,下面依次介绍。

2.1 cookie

cookie是与域名绑定的,不会被其它域访问。

每个域名下可设置的cookie总数是有限的,各浏览器有不同规定。每个cookie的大小不超过4kb。

cookie由以下几个部分组成:cookie名、值、域、路径、失效时间、安全标识。其中名和值是必须的。

可通过document.cookie访问cookie信息。

和cookie相关的方法主要有三种:读取、写入和删除。

2.2 web storage

storage弥补了cookie的局限性,提供了一种容量更大且允许跨会话存在的储存机制。


clear()


删除所有值


getItem(name)


根据name获取相应的值


key(index)


获取index处的值的名字


removeItem(name)


删除由name指定的名值对


setItem(name, value)


为指定的name设置一个值,或者用于设置新的名值对

storage是一个引用类,它有两个实例:sessionStorage和globalStorage。

sessionStorage的数据只能保持到浏览器关闭。本地文件不可用。

sessionStorage本质就是对象,所以要储存数据,除了用setItem方法外,还可以直接设置:sessionStorage.name = value;以及直接读取:var val = sessionStorage.name;

globalStorage在H5规范中被localStorage替代。

localStorage的数据一直保存到被js清除或缓存被清除之时。和cookie一样,localStorage只能在同一域名下使用。其大小限制在2.5MB内(有的浏览器是5MB)。

2.3 IndexedDB

IndexedDB是在浏览器中保存结构化数据的一种数据库。

它采用对象储存数据,而不是用表。

它也受同源限制。大小一般不超过5MB。

时间: 07-24

Kidney日拱一卒JavaScript系列Chapter10 Other Client-side Technology的相关文章

Kidney日拱一卒JavaScript系列Chapter0 Preface

Chapter 0 前言 1.JavaScript简史 1994年网景发布了Navigator浏览器,由于当时的网页缺乏交互能力,因此网景急需一种脚本语言为网页添加交互,但究竟用什么语言,一时难以定夺.然而第二年Sun发布了Java,其席卷天下的态势,促使网景做出抱大腿的决定,网景与Sun结盟之后,Sun完全介入了脚本语言开发的决策. 最终,网景决定开发一款仿照Java的简化版语言,并将任务指派给Brendan Eich,然而这家伙对Java毫无兴趣,为了应付交差,他只用了两周时间就把JavaS

Kidney日拱一卒JavaScript系列Chapter9 DOM

Chapter 9 文档对象模型 1.DOM树 DOM是HTML和XML文档提供的一系列API的集合. DOM将HTML和XML文档描绘成一个由多层次节点构成的树结构,文档中所有的元素都是一个节点. 树结构的根节点(又称文档元素)有且只有一个. HTML文档的根节点始终是<html>,XML文档则可以是任何元素. 1.1 使用nodeType检测节点类型 节点(node)一共有12种类型,每种类型用一个1~12之中的数字表示. 数字 表达式 说明 1 Node.ELEMENT_NODE 元素类

Kidney日拱一卒JavaScript系列Chapter4 Statements

Chapter 4 语句 从形式上看,语句就是以分号结尾的一段代码.无论这段代码是表达式,还是别的什么东西,甚至什么都没有,只要以分号结尾,就可以看成是语句. 从功能上看,语句隐含了“使某件事发生”的意义(make something happen). 用大括号将多条语句包含起来,就形成了复合语句(语句块). JavaScript programs are nothing more than a sequence of statements to execute. 1.条件condition 1

Kidney日拱一卒JavaScript系列Chapter2 Values&amp;Variables

Chapter 2 值和变量 1.值 Values 计算机能做的唯一的事就是处理数据. 计算机所处理的一切数据,无论是数字.文字,还是图片.音频和视频,其最终在硬件中运行的形态都是bit,用数学方式表达即0和1,用物理方式表达即电流的低压和高压. 在程序语言中,数据被称为“值”.值由一系列的bit组成. 2.值的类型 Types  JavaScript一共有六种类型的值,其中有五种基本类型:number,string,boolean,null,undefined和一种复杂类型:object.  

Kidney日拱一卒JavaScript系列Chapter1 Syntax

Chapter 1 语法 1.大小写敏感 Case Sensitive 2.注释 Comments // 单行注释 /* 多行注释 */ /* * 多行注释一般这么写 */ 3.严格模式 ES5引入严格模式用于规避ES3中某些不确定行为. "use strict "; 可在脚本文件顶部或函数内部上方引入上述声明. 4.JavaScript只有三种类型的字符:标识符.值.操作符. 标识符(Identifier)就是一个名称,可能是变量名.函数名.对象名,还可能是关键字(Keywords)

Kidney日拱一卒JavaScript系列Chapter3 Operators&amp;Expressions

Chapter 3 操作符与表达式 1.操作符 从形式上看,操作符既可以是符号(如+,-,*等),也可能是字符(delete,instanceof等): 从结构上看,操作符可分为一元.二元和三元操作符. 使用操作符操作值,会存在各种隐式转换. 下表是所有的操作符,从上到下优先级从高到低,分割线内优先级相同. 1.1 递增与递减 前置:先计算,后取值: 后置:先取值,后计算: 1.2 位操作符 用于操作底层的内存地址. 1.3 布尔操作符 共三个,其优先级顺序是!> && > |

Windows Server 2008 网络管理资料收集 争取做“日拱一卒“

Windows Server 2008R2系统管理[刘道军主讲MCITP课程] http://edu.51cto.com/course/course_id-510.html 安装活动目录服务器 http://edu.51cto.com/lesson/id-20503.html Windows Server 2008 R2 活动目录管理演示 http://edu.51cto.com/course/course_id-1024.html WinServer 2012文件服务器案例分析[第二十五期]

别做操之过急的”无效将军”,做实实在在的”日拱一卒”

前天在网上看到一句话很不错,拿来和大家分享,同时用我的"大叔"三观来解读这句话. 这句话是:"我们不需要操之过急的"无效将军",我们需要实实在在的"日拱一卒". 这句话翻译成日常用语的话来自于一句很经典的语句:纵使一年不将军,不可一日不拱卒.此句来源于中国象棋:       将军:象棋中向对手发出可能产生"致命"的一招.这个词一般描绘象棋者比较高大上的情形.       拱卒:下过象棋的人应该知道,有种下法叫做&qu

魔盒——日拱一卒,功不唐捐把

郑昀 创建于2017/6/29 最后更新于2017/6/30 关键词:大数据,Spark,SparkSQL,HBase,HDFS,工作流,任务,Flow,Job,监控报警 提纲: 为什么要大数据协作? 什么是愿景? 我们的DataCube 工作流什么样? DataCube 是数据中心刘奎组推出的大数据协作平台.从2016年3月29日我提出数据中心的大一统平台建设目标至今,已经过去了整整一年零三个月时间.其实在很久以前,基于 Hadoop 集群的单一离线计算任务的上传和管理工作,针对 Mesos