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

《javascript高级程序设计》笔记(二十三)

时间:2014-10-29 01:53:17      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   os   ar   使用   java   

离线应用与客户端存储

(一)离线检测

navigator.onLine属性,值为true表示设备能上网,否则为离线,但在不同浏览器有差异。单独使用navigator.onLine不能确定网络是否联通,但请求发生错误时检测它仍然有用。

online和offline   当网络从离线变成在线或在线变成离线 会触发者两个事件。

 

检测应用是否离线,在页面加载后,先通过navigator.onLine取得初始状态,然后通过这两个事件确定网络是否变化。

IE6+(只支持navigator.onLine属性)  Firefox3   Safari 4    Opera 10.6    Chrome    iOS 3.2  

 

(二)应用缓存

appcache     为开发离线Web应用而设计。   描述文件列出要下载和缓存的资源。

<html>的manifest属性中指定这个文件的路径。

status属性表示应用缓存的当前状态。

Firefox 3+    Safari  4+    Opera 10.6    Chrome  

(三)数据存储

1.cookie

服务器对任意HTTP请求发生Set-Cookie HTTP头作为响应的一部分。

HTTP /1.1 200 OK
Content-type:  text/html
Set-Cookie:  name=value
Other-header:  other-header-value

这个HTTP相应设置以name为名称、value为值的一个cookie,名称和值都以URL编码传递。

 

浏览器通过为每个请求添加Cookie HTTP头将信息发送给服务器

GET  /index.html  HTTP/1.1
Cookie:  name=value
Other-header:  other-header-value

 

①限制

每个域的cookie总数有限,尺寸也有限制。

 

②cookie的构成

    名称:不区分大小写。必须经过URL编码。

    值:储存在cookie的字符串值,必须被URL编码。

    域:cookie对哪个域有效。默认认作来自设置cookie的那个域。

    路径:对于指定域的那个路径,应该向服务器发送cookie。

    失效时间:cookie何时应该被删除的时间戳,值是GMT格式的日期。

    安全标志:指定后,cookie只有在使用SSL连接时才发送到服务器。

 

每一段信息作为Set-Cookie的一部分,用分号加空格分隔

HTTP /1.1 200 OK
Content-type:  text/html
Set-Cookie:  name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path/; secure
Other-header:  other-header-value

 域、路径、失效时间和secure标志都是服务器给浏览器的提示,这些参数不会作为发送给服务器的cookie信息的一部分,只有名值对才发送。

 

③javascript的cooki

 BOM的document.cookie属性会因为使用它的方式不同而表现出不同行为。

 当用来获取属性值时,document.cookie返回当前页面可用的所有cookie的字符串,一系列由分号隔开的名值对,必须使用decodeURIComponent()对名和值进行URL编码。

 当用于设置值时,document.cookie属性可以设置一个新的cookie字符串,会被解析并添加到现有的cookie,除非设置的名称已存在,否则不会覆盖。

 

        var cookieName = encodeURIComponent(name) + "=" +encodeURIComponent("Nicholas") + "; domain=.worx.com; path/";

 

 

④子cookie

 为了绕开浏览器的单域名下的cookie数限制而使用。常见格式:

name=name1=value1&name2=value2&name3=value3&name4=value4

 

子cookie一般也以查询字符串的格式进行格式化,然后这些值可以使用单个cookie进行存储和访问。

 

⑤关于cookie的思考

 

2.IE用户数据

 IE 5 使用持久化用户数据,首先使用CSS某个元素指定userData行为,然后使用setAttribute方法保存数据,为了将数据提交到浏览器还要调用save()告诉它数据空间的名称。下次页面载入后可以使用load()指定  同样的数据空间来获取数据。removeAttribute()方法指定删除某元素数据。

 

3.Web存储机制

Web Stroage的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端时,无需持续将数据发回服务器,它的两个主要目标是:提供一种在cookie之外存储会话数据的途径、提供一种存储大量可以跨会话存在的数据的机制。

sessionStorage和globalStorage对象以window对象属性存在

IE8+ Firefox 3.5+ Chrome 4+ Opera 10.5+

 

 ①Stroage类型

提供最大的存储空间

 ②seessionStorage对象

存储特定于某个会话的数据,只保持到浏览器关闭,主要用于只针对会话的小段数据的存储。

 ③globalStroage对象

 目的是跨越会话存储数据,有特定的访问限制。

 ④localStroage对象

 在修订过的HTML5规范作为持久保存客户端数据的方案取代了globalStorage。

 ⑤stroage事件

 对storage对象任何修改都会在文档上触发storage事件。

 ⑥限制

 每个来源都有固定大小的空间保存自己的数据。

 

4.IndexedDB

  是在浏览器保存结构化数据的一种数据库,其思想是创建一套API,方便保存和读取javascript对象,还支持查询和搜索。

  操作完全是异步进行,差不多每一次操作都要注册onerror或onsuccess事件处理程序。

 

  ①数据库

   它的最大特色是使用对象保存数据,而不是使用表。

  ②对象存储空间

  使用对象存储空间,如果数据库版本与传入的版本不匹配可能要创建新的对象存储空间。在创建对象存储空间必须指定键,作为唯一的数据。

  ③事务

  调用transaction()方法可以创建事务,任何时候想读取或修改数据都通过事务来操作。

  ④使用游标查询

  在需要检测多个对象的情况下需要在事务内部创建游标。游标是指向结果集的指针,先指向结果的第一项,接到查询下一项的指令时才指向下一项。

  ⑤键范围

  由IDBKeyRange的实例表示。

  ⑥设定游标方向

  openCursor()可接受两个参数。

  ⑦索引

 创建索引先要引用对象存储空间,然后调用createInedx()方法。

  ⑧并发问题

   只有浏览器仅有一个标签页使用数据库的情况下,调用setVersion才能完成操作。

  ⑨限制

  只能由同源页面操作,不能跨域共享信息;每个来源的数据库占用的磁盘空间有限制。

《javascript高级程序设计》笔记(二十三)

标签:style   blog   http   io   color   os   ar   使用   java   

原文地址:http://www.cnblogs.com/surahe/p/4057157.html

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