码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-07-25 17:59:34      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

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。

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

标签:

原文地址:http://www.cnblogs.com/kidney/p/5704360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!