JS红皮书读书笔记-23-离线应用与客户端存储

提醒:本文发布于 1472 天前,文章内容可能 因技术时效性过期 或 被重新修改,请谨慎参考。

TOC
  1. 1. 离线检测
  2. 2. 应用缓存
  3. 3. 数据存储
    1. 3.1. Cookie
    2. 3.2. IE用户数据
    3. 3.3. Web存储机制
    4. 3.4. IndexDB/WebSQL

保持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用,就是在设备不能上网的情况下仍然可以运行的应用。

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

离线检测

HTML5提供了这个API检测设备是否离线:

var isOn = navigator.onLine;	// true or false

除 navigator.onLine 属性之外,为了更好地确定网络是否可用,HTML5 还定义了两个事件:onlineoffline。当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。这两个事件在 window 对象上触发。

// 只有网络状况发生变化的时候才会触发以下事件
windw.addEventListener("online", function(){
console.log("Online");
});

windw.addEventListener("offline", function(){
console.log("Offline");
}

应用缓存

这篇文章能够更清晰了解html5 appcache

数据存储

Cookie最初是用来在客户端储存会话信息的。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为相应的一部分,其中包含会话的信息。例如:

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

这里就设置了一个以name为名称,value为值的一个cookie。
浏览器会储存这样的会话信息。并在这之后通过为每一个请求添加Cookie HTTP头部将信息发送回服务器:

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

这个信息对于服务器来说就可以唯一验证请求的身份

限制
cookie在性质上是绑定在特定域名下的。当设定了一个cookie,再给创建它的域名发送请求时都会包含这个cookie,而发向其他域的请求中并不会包含这个cookie。这个限制保证了cookie只能让批准的接受者访问。
每个域的cookie总数是有限的,各浏览器不同,最小的规定一个域有30个cookie,大小一般不超过4095B。
cookie的构成
cookie由浏览器保存的一下几块信息构成:

  • 名称:一个唯一确定cookie的名称
  • 值:储存在cookie中的字符串值
  • 域:这个cookie对哪个域有效,如果这个域包含子域,那对子域同样有有效。如果设定是没有明确指定,这个值会被认为是设置cookie的那个域
  • 路径:用于指定向域中的哪个路径发送cookie,例如,你可以指定cookie只发送到www.baidu.com/img,那再访问www.baidu.com时就不会发送cookie。及时它们同域
  • 失效时间:cookie应该被删除的时间戳,默认浏览器会话结束就删除
  • 安全标志:指定后,cookie只有在使用SSL连接时才会发送到服务器

看例子:

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

JS中的cookie
可以通过document.cookie返回如下格式的字符串:

document.cookie;	//name1=value1;name2=value2;name3=value3

js中设置删除cookie不是很好操作, 我给出一个封装好的demo:

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.cookie.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);
}
};
CookieUtil.set("book", "Professional JavaScript");
console.log(CookieUtil.get("book"));
CookieUtil.unset("book");
console.log(CookieUtil.get("book"));

子Cookie
子Cookie方案的提出实际上是为了避免单域名对cookie个数的限制, 它的思想就是在单个cookie中存更多的名值对, 不过写这个笔记的时候, 市场上的主流是现代浏览器(谷歌内核), 没有单域名cookie个数限制, 这里不再讲解.

关于Cookie的一些说明

  • cookie存储的数据不宜过多: 信息越多, 后端响应越慢
  • 不要存敏感信息, 否则XSS泄露麻烦

IE用户数据

略, 不要用

Web存储机制

目前来说主要是localStorage和sessionStorage. 书中有些内容以及不适合现在, 看 这个例子更简洁

IndexDB/WebSQL

书上只介绍了indexDB , 我们看 这篇文章 , 更加直观介绍两种方案.

访客评论