Javascript离线应用于客户端储存_html/css_WEB-ITnose

开发离线Web应用需要几个步骤:

首先确保应用知道设备是否能上网。

应用必须能访问一定的资源(图像,Javascript,CSS)，这样才能正常工作。

离线检测

navigator.onLine

HTML5新定义的属性，这个属性值为true表示设备能上网，值为false表示离线设备。这个属性的关键是浏览器必须知道设备能否访问网络，从而返回正确的值。

应用缓存

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

要想在这个缓存中保存数据，可以使用一个描述文件(manifest file),列出要下载和缓存的资源。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。

使用缓存接口可为您的应用带来以下三个优势：

离线浏览 - 用户可在离线时浏览您的完整网站

速度 - 缓存资源为本地资源，因此加载速度较快。

服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。

清单文件

清单文件必须以 text/cache-manifest MIME 类型提供

清单文件格式

CACHE MANIFEST# 2010-06-18:v2# Explicitly cached 'master entries'.CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# Resources that require the user to be online.NETWORK:login.php/myapihttp://api.twitter.com# static.html will be served if main.py is inaccessible# offline.jpg will be served in place of all images in images/large/# offline.html will be served in place of all other .html filesFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html

清单可包括以下三个不同部分：CACHE、NETWORK 和 FALLBACK。

CACHE：这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。

NETWORK：此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。

FALLBACK：此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。

NOTE这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现。

引用清单文件

...

NOTE:

CACHE MANIFEST字符串应在第一行，且必不可少。

网站的缓存数据量不得超过 5MB。

HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单(也就是加了密的网站 Are https URLs encrypted)。因此，通过 https 提供的网页可实现离线运行。

如果您要编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage取消该限制。

如果清单文件或其中指定的资源无法下载，就无法进行整个缓存更新进程。在这种情况下，浏览器将继续使用原应用缓存。

applicationCache对象

applicationCache对象有一个status属性，属性的值是常量，表示应用缓存的状态。

applicationCache.status

0:无缓存，即没有与页面相关的应用缓存

1:闲置，即应用缓存未得到更新

2:检查中，即正在下载描述文件并检查更新

3:下载中，即应用缓存正在下载描述文件中指定的资源

4:更新完成，即应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过 swapCache()来使用了

5:废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

Cookie

HTTP cookie，通常叫做cookie，最初是在客户端用于存储会话信息的。该标准要求服务器的任意HTTP请求发送Set-Cookie HTTP头部作为响应的一部分，其中包含会话信息。

// HTTP响应HTTP/1.1 200 OKContent-type: text/htmlSet-cookie: name=valueOther-header: other-header-value // HTTP请求GET /index.html HTTP/1.1Cookie: name=valueOther-header: other-header-value

第一段会话过程

服务器:设置name=value的cookie,并将其作为响应头部的一部分，发送给浏览器。

浏览器:储存name=value的cookie并将其作为请求头的一部分，发送给服务器。

NOTE:

会话过程的名称和值都是经过URL编码的。

每个域的cookie总数是有限的，不同浏览器之间各有不同。当超过单个域名限制之后还有再设置cookie，浏览器就会清除以前的cookie。

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

cookie构造

// HTTP响应HTTP/1.1 200 OKContent-type: text/htmlSet-cookie: name=value; expires=Mon, 22-JAN-07 07:10:24 GMT; domain=.wrox.com;path=/;secureOther-header: other-header-value // HTTP请求GET /index.html HTTP/1.1Cookie: name=valueOther-header: other-header-value

名称(name):一个唯一确定cookie的名称，cookie的名称必须是经过 URL编码的。

值(value):储存在cookie的字符串值，值必须被 URL编码。

域:cookie对于那个域是有效的。所有向该域发送的请求中都会包含这个cookie信息。如果没有明确设定，那么这个域会被认作来自设置cookie的那个域。

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

失效时间:表示cookie应该被删除的那个时间戳

安全标志:指定后，cookie只能在SSL的连接时，才能发送到服务器

第二段会话过程

服务器:设置name=value的cookie,同时告诉浏览器

它会在格林威治时间2007年1月22日7:20:24失效。

对于所有wrox.com的子域和域名下(由path参数指定的)都有效

同时通过SSL连接才能传输。并将其作为响应头部的一部分，发送给浏览器。

浏览器:储存name=value的cookie并将其作为请求头的一部分，发送给服务器。

Note:后四个，域/路径/失效时间/安全标志都是服务器给浏览器的指示。以指定何时该发送cookie。这些参数并不会作为发送到服务器的标志，名值对才会被发送。只有cookie的名字和值是必须的。

document.cookie

读

用来获取属性值时， document.cookie返回当前页面可用的(根据cookie的域，路径，失效时间和安全设置)所有的cookie的字符串。

[]()

写

当用来设置值得时候， document.cookie可以用来设置新的cookie字符串。这个cookie字符串会用来解释并添加到现有的cookie中。设置的值并不会覆盖cookie，除非设置的值已经存在。

var cookieUtil = {    get: function ( name ) {        var cookieName = encodeURIComponent( name ) + '=',            cookieStart = document.cookie.indexOf(cookieName),            cookieValue = null;        if( cookieStart > -1 ) {            var cookieEnd = document.cookie.indexOf(';',cookieStart);            if( cookieEnd === -1 ) {                cookieEnd = document.length;            }            cookieValue = decodeURIComponent( document.cookie ).substring(cookieStart+cookieName.length, cookieEnd)        }        return cookieValue;    },        set: function ( name, value, expires, path, domain, secure ) {        var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);        if( expires instanceof Date ) {            cookieText += "; expires=" + expires.toGMTString();        }        if( path ) {            cookieText += '; path=' + path;         }        if( domain ) {            cookieText += '; domain=' + domain;        }        if( secure ) {            cookieText += '; secure';        }        document.cookie = cookieText;    },    unset: function ( name, path, domain, secure ) {        this.set( name, '' , new Date(0), path, domain, secure)    }}

子cookie

为了绕开浏览器的单域名下的cookie数限制，一种开发人员使用了一种称为子cookie(subcookie)的概念。子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来储存多个名称值对儿。

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

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

上面展示了如何写入，读取和删除cookie，下面展示操作子cookie的方法。

var SubCookieUtil = {    get: function ( name, subName ) {        var cookieValue = this.getAll( name );        if( subName ) {            return result[subName];        }        else {            return null;        }    },    getAll: function ( name ) {        var cookieName  = encodeURIComponent( name ) + '=',            cookieStart = document.cookie.indexOf( cookieName ),            cookieValue = null,            cookieEnd,            result      = {};        if( cookieStart > -1 ) {            cookieEnd = document.cookie.indexOf( ';', cookieStart );            if( cookieEnd === -1 ) {                cookieEnd = document.cookie.length;            }        }        cookieValue = document.cookie.substring( cookieStart+cookieName.length, cookieEnd );        decodeURIComponent( cookieValue );        if( cookieValue.length > 0 ) {            subCookies = cookieValue.split( '&' );            for( var i = 0; i   0 ) {            cookieText += subCookiesParts.join('&');            if( expires instanceof Date ) {                cookieText += '; expires=' + expires.toGMTString();             }            if( path ) {                cookieText += '; path=' + path;            }            if( domain ) {                cookieText += '; domain=' + domain;            }            if( secure ) {                cookieText += '; secure'            }        } else {            cookieText += '; expires=' + (new Date(0).toGMTString());        }        document.cookie = cookieText;    },    unsetAll: function ( name, subCookies, expires, path, domain, secure ) {        this.set( name, null, new Date(0), path, domain, secure );    },    unset: function ( name, subName, expires, path, domain, secure ) {        var subCookies = this.get( name );        if( subCookies ) {            delete subCookies[subName]            this.setAll( name, subCookies, expires, path, domain, secure );        }    }}

关于cookie的性能与安全

由于所有的cookie都会由浏览器作为请求头发送，所以在cookie中存储大量信息会影响到特定域的请求性能。cookie信息越大，完成对服务器请求的时间也就越长。

cookie数据并非存储在一个安全环境中，其中包含的任何数据都可被他人访问。所以一定不要在cookie中储存重要和敏感的数据。

IE用户数据

在IE5.0中，微软通过一个自定义行为引入了持久化用户数据的概念。用户数据允许每个文档最多128KB数据，每个域名最多1MB数据。要使用持久化用户数据，首先，必须如下所示，使用CSS在某个元素上指定userData行为。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111273

更新时间：2022-11-17 阅读：34次