JavaScript中离线应用和客户端存储(cookies、sessionStorage、localStorage)

一、离线应用

所谓离线web应用,就是在设备不能上网的情况下仍然可以运行的应用。

开发离线web应用需要几个步骤:首先,确保应用知道设备是否能上网,以便下一步执行正确的操作;然后,应用还必须能访问一定的资源(图像、JavaScript、css等),只有这样才能正常工作;最后,必须有一块本地空间用于保存数据,无论能否上网都不妨碍读写。

1、离线检测

HTML5定义一个navigator.onLine属性,这个属性值为true表示设备能上网,值为false表示设备离线。

除了navigator.onLine属性之外,HTML5还定义了两个事件:online和offline。当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。

为了检测应用是否离线,在页面加载后,最好先通过navigator.onLine取得初始的状态。然后,就是通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时,navigator.onLine属性的值也会改变,不过必须手工轮询这个属性才能检测到网络状态的变化。

2、应用缓存

HTML5的应用缓存,或者简称为appcache,是专门为开发离线Web应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。

二、数据存储

1、cookie

是在客户端用于存储会话信息的。该标准要求服务器对任意http请求发送Set-Cookie Http头作为响应头的一部分,其中包括会话信息。

(1)限制

cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后,再创建它的域名发送请求时,都会包含这个cookie。

由于cookie是存在客户端计算机上的,还加入了一些限制确保cookie不会被恶意使用,同时不会占用太多磁盘空间。

1、IE6以及更低版本限制每个域名最多20个cookie

2、IE7和之后版本每个域名最多50个。

3、Firefox限制每个域最多50个cookie。

4、Opera限制每个域最多30个cookie。

5、Safari和Chrome对于每个域的cookie数量限制没有硬性规定。

浏览器中对于cookie的尺寸也有限制。大多数浏览器都有大约4096B(加减1)的长度限制。为了最佳的浏览器兼容性,最好将整个cookie长度限制在4095B(含4095)

以内。

2、IE用户数据

在IE5.0中,微软通过一个自定义行为引入了持久化用户数据的概念。用户数据允许每个文档最多128KB数据,每个域名最多1MB数据。

<div style="behavior:url(#default#userData)" id="dataStore"></div>

var dataStore = document.getElementById("dataStore");
dataStore.setAttribute("name","xiaolu");
dataStore.setAttribute("book","javaScript");
dataStore.save("BookInfo");

在这段代码中,<div>元素上存入了两部分信息。在用setAttribute()存储数据之后,调用了save()方法,指定了数据空间的名称为BookInfo。下一次页面载入之后,可以使用load()方法指定同样的数据空间名称来获取数据;

dataStore.load("BookInfo");

alert(dataStore.getAttribute("name"));  //xiaolu
alert(dataStore.getAttribute("book"));   //javaScript

可以通过removeAttribute()方法明确指定要删除某元素数据,只要指定属性名称。删除之后,必须要再次调用save()来提交更改。

dataStore.removeAttribute("name","xiaolu");
dataStore.removeAttribute("book","javaScript");
dataStore.save("BookInfo");

对IE用户数据的访问限制和对cookie的限制类似。要访问某个数据空间,脚本运行的页面必须来自同一个域名,在同一个路径下,并使用与进行存储的脚本同样的协议。

和cookie不同的是,你无法将用户数据访问限制扩展到更多的客户。还有一点不同,用户数据默认是可以跨越会话持久存在的,同时也不会过期;数据需要通过removeAttribute()方法专门进行删除以释放空间。

cookie和IE用户数据并非安全,所以不能存放敏感信息。

三、Web存储机制

1、sessionStorage对象

sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。

2、localStorage对象

要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。数据保留到通过JavaScript删除或者是用户清除浏览器缓存。

限制:对于localStorage而言,大多数桌面浏览器会设置每个来源5MB的限制,Chrome和Safari对每个来源的限制是2.5MB。而iOS版的Safari和Android版的webkit的限制也是2.5MB

对sessionStorage的贤惠也是因浏览器而异。有的浏览器对sessionStorage的大小没有限制,但Chrome、Safari、iOS版Safari和Android版Webkit都有限制,也就是2.5MB。IE8+和Opera对sessionStorage的限制是5MB。

3.indexedDB

是在浏览器中保存结构化数据的一种数据库。最大特色是使用对象保存数据,而不是使用表来保存数据。

Web storage 和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

但是Cookie是不可或缺的Lcookie的作用是和服务器进行交互,作为HTTP规范的一部分而存在,而Web Storage仅仅是为了在本地“存储”数据而生。

浏览器的支持处理IE7及以下不支持外,其他标准浏览器都完全支持,值得一提的是,IE7、IE6中的userData其实就是JavaScript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持Web Storage

localStorage和sessionStorage都具有相同的操作方法,例如setItem,getItem,removeItem等。

时间: 2024-10-09 11:29:10

JavaScript中离线应用和客户端存储(cookies、sessionStorage、localStorage)的相关文章

JS中离线应用与客户端存储

1.离线检测:H5定义了navigator.online属性,为true 表示设备能上网 还定义了两个相关事件:online和offline 2 数据存储 cookie--HTTP coolie,客户端存储会话信息的.该标准要求服务器对任意的HTTP请求发送Set-Cookie HTTP头作为响应的一部分' /* HTTP/1.1 200 OK Content-type: text/html Set-Cookie: name=value;expire=expiration_time;path=d

Javascript高级程序设计-23:HTML5离线应用和客户端存储

一.离线检测 开发离线应用的第一个步骤是确定设备是在线还是离线,为此HTML5设置了一个navigator.onLine属性来表明浏览器是否可以上网.这个属性为true表示设备可以上网,值为false表示设备离线. if(navigator.online){ //online } else{ //offline } 除了navigator.online属性外,HTML5还专门设置了两个事件:online和offline,分别在设备上线和离线的时候触发. window.addEventListen

离线应用和客户端存储

//region离线检测    //判断设备是否能上网 navigator.onLine  window事件online offline    //alert( navigator.onLine ); //监测网络变化    W.addHandler( window, "online", function () {        alert( "online" );    } );    W.addHandler( window, "offline&quo

JavaScript中利用Ajax 实现客户端与服务器端通信(九)

一:Ajax (Asynchronous JavaScript and XML)不是一个新的技术,事实上,它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起 Ajax的关键技术: 1.使用XHTML(HTML)和CSS构建标准化的展示层 2.使用DOM进行动态显示和交互 3.使用XML和XSLT进行数据交换和操纵 4.使用XMLHttpRequest异步获取数据 5.使用JavaScript将所有元素绑定在一起 二:如何去写Ajax应用程序: 第一步:创建一个XMLHTTP对象 第二的

javascript的本地存储 cookies、localStorage

一.cookies 本地存储 首先是常用的cookies方法,网上有很多相关的代码以及w3cSchool cookies. 1 // 存储cookies 2 function setCookie(name,value,expiredays) 3 { 4 var argv = setCookie.arguments; 5 var argc = setCookie.arguments.length; 6 var LargeExpDate = new Date (); 7 var expires =

Web存储机制—sessionStorage,localStorage使用方法

Web存储机制,在这里主要聊有关于Web Storage API提供的存储机制,通过该机制,浏览器可以安全地存储键值对,比使用cookie更加直观.接下来简单的了解如何使用这方面的技术. 基本概念 Web Storage 包含两种机制: sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) localStorage同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在 这两种机制是通过Window.se

JavaScript中的闭包永远都存储在内存中,除非关闭浏览器

1 //閉包實現累加功能 2 function fn1() { 3 var n = 1; 4 add = function() { 5 n += 1; 6 } 7 8 function fn2() { 9 n += 1; 10 console.log(n); 11 } 12 return fn2; 13 } 14 var resule = fn1(); 15 resule(); 16 resule();//由于N存在于内存中,所有可以多次调用可以递增 17 resule(); 18 resule

JavaScript 中的多线程通信

本文参考<Html 5 与 CSS 3 权威指南> 在Html 5诞生之后,我们可以使用javascript来实现多线程处理.H5 新增了一个web workers api,使用这个API,用户可以很容易地创建在后台运行的线程,H5 中被称为workder ,如果将费时比家长的操作放到后台去执行,对用户在界面的操作就完全没有影响了. 创建后台线程也十分的简单,只要在workder类的构造器中将需要执行的脚本文件的url作为参数,然后创建worker对象就可以了,如下所示 var worker

JavaScript 中的多线程通信的方法

在Html 5诞生之后,我们可以使用javascript来实现多线程处理.H5 新增了一个web workers api,使用这个API,用户可以很容易地创建在后台运行的线程,H5 中被称为workder ,如果将费时比家长的操作放到后台去执行,对用户在界面的操作就完全没有影响了. 创建后台线程也十分的简单,只要在workder类的构造器中将需要执行的脚本文件的url作为参数,然后创建worker对象就可以了,如下所示 var worker = new Worker("test.js"