《javascript高级程序设计》 第23章 离线应用与客户端存储
2013-09-02 12:45
274 查看
23.1 离线检测
23.2 应用缓存
23.3 数据存储
23.3.1 Cookie
23.3.2 IE 用户数据
23.3.3 Web 存储机制
23.3.4 IndexedDB
23.1 离线检测
navigator.onLine ? "Online" : "Offline"
支持离线检测的浏览器有IE 6+(只支持navigator.onLine 属性)、Firefox 3、Safari 4、Opera 10.6、
Chrome、iOS 3.2 版Safari 和Android 版WebKit。
23.2 应用缓存
applicationCache.update();
applicationCache.swapCache(); //启用新应用缓存。
EventUtil.addHandler(applicationCache, "updateready", function(){
applicationCache.swapCache();
});
23.3 数据存储
cookie
1.限制
IE6 以及更低版本限制每个域名最多20 个cookie。
IE7 和之后版本每个域名最多50 个。IE7 最初是支持每个域名最大20 个cookie,之后被微软的
一个补丁所更新。
Firefox 限制每个域最多50 个cookie。
Opera 限制每个域最多30 个cookie。
Safari 和Chrome 对于每个域的cookie 数量限制没有硬性规定。
2. cookie 的构成
名称、值、域、路径、失效时间、安全标志
3. JavaScript 中的cookie
document.cookie = "name=Nicholas";
document.cookie = encodeURIComponent("name") + "=" +encodeURIComponent("Nicholas");
要给被创建的cookie 指定额外的信息,只要将参数追加到该字符串,和Set-Cookie 头中的格式一样
document.cookie = encodeURIComponent("name") + "=" +encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";
基本的cookie 操作有三种:读取、写入和删除。
4. 子cookie(代码详见书中)
为了绕开浏览器的单域名下的cookie 数限制,一些开发人员使用了一种称为子cookie(subcookie)的概念。
要设置子cookie,也有两种方法:set()和setAll()。以下代码展示了它们的构造。
5. 关于cookie 的思考
还有一类cookie 被称为“HTTP 专有cookie”。HTTP 专有cookie 可以从浏览器或者服务器设置,但
是只能从服务器端读取,因为JavaScript 无法获取HTTP 专有cookie 的值。
cookie 信息越大,完成对服务器请求的时间也就越长
23.3.2 IE用户数据(经测试仅在ie7下可以)
和cookie 不同的是,你无法将用户数据访问限制扩展到更多的客户。还有一点不同,用户数据默认是可以跨越会话持久存在的,同时
也不会过期;数据需要通过removeAttribute()方法专门进行删除以释放空间。
23.3.3 Web存储机制
Web Storage 的两个主要目标是:
提供一种在cookie 之外存储会话数据的途径;
提供一种存储大量可以跨会话存在的数据的机制。
1. Storage 类型
只能存储字符串。非字符串的数据在存储之前会被转换成字符串。
2. sessionStorage 对象
和datastore的结构差不错啊,没有迭代sessionStorage 中的值
sessionStorage 对象应该主要用于仅针对会话的小段数据的存储。如果需要跨越会话存储数据,
那么globalStorage 或者localStorage 更为合适。
3. globalStorage 对象(在ff23.0.1的页面上测试有错:globalStorage is not defined,所以就不要用了,link,20130911)
用户未清除浏览器缓存, 存储在
globalStorage 属性中的数据会一直保留在磁盘上。这让globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置。
如果你事先不能确定域名,那么使用location.host 作为属性名比较安全。
4. localStorage 对象
为了兼容只支持globalStorage 的浏览器,可以使用以下函数。
function getLocalStorage(){
if (typeof localStorage == "object"){
return localStorage;
} else if (typeof globalStorage == "object"){
return globalStorage[location.host];
} else {
throw new Error("Local storage not available.");
}
}
[align=left]5. storage 事件(这个在ff和chrome下也没反应,也没有报错,link)
[/align]
EventUtil.addHandler(document, "storage", function(event){
alert("Storage changed for " + event.domain);
});
6. 限制
localStorage :5MB 。Chrome 、Safari 是2.5MB。iOS 版Safari 和Android 版WebKit 2.5MB。
sessionStorage:有的浏览器没有限制,
但Chrome、Safari、iOS 版Safari 和Android 版WebKit ,2.5MB。
IE8+和Opera 5MB。
Web Storage 限制,请参考http://dev-test.nemikor.com/web-storage/support-test/。
23.3.4 IndexedDB
Indexed Database API,浏览器中保存结构化数据的一种数据库。
var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB ||
window.webkitIndexedDB;
IndexedDB Example 02 就遇到bug啦,不知道怎么解决,没有信心再看下去啦,详见论坛
request = database.setVersion("1.0");
alert(database.version); 应该是setVersion的问题,网上有一个例子就可以实现的
23.2 应用缓存
23.3 数据存储
23.3.1 Cookie
23.3.2 IE 用户数据
23.3.3 Web 存储机制
23.3.4 IndexedDB
23.1 离线检测
navigator.onLine ? "Online" : "Offline"
支持离线检测的浏览器有IE 6+(只支持navigator.onLine 属性)、Firefox 3、Safari 4、Opera 10.6、
Chrome、iOS 3.2 版Safari 和Android 版WebKit。
23.2 应用缓存
applicationCache.update();
applicationCache.swapCache(); //启用新应用缓存。
EventUtil.addHandler(applicationCache, "updateready", function(){
applicationCache.swapCache();
});
23.3 数据存储
cookie
1.限制
IE6 以及更低版本限制每个域名最多20 个cookie。
IE7 和之后版本每个域名最多50 个。IE7 最初是支持每个域名最大20 个cookie,之后被微软的
一个补丁所更新。
Firefox 限制每个域最多50 个cookie。
Opera 限制每个域最多30 个cookie。
Safari 和Chrome 对于每个域的cookie 数量限制没有硬性规定。
2. cookie 的构成
名称、值、域、路径、失效时间、安全标志
3. JavaScript 中的cookie
document.cookie = "name=Nicholas";
document.cookie = encodeURIComponent("name") + "=" +encodeURIComponent("Nicholas");
要给被创建的cookie 指定额外的信息,只要将参数追加到该字符串,和Set-Cookie 头中的格式一样
document.cookie = encodeURIComponent("name") + "=" +encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";
基本的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.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); } };
4. 子cookie(代码详见书中)
为了绕开浏览器的单域名下的cookie 数限制,一些开发人员使用了一种称为子cookie(subcookie)的概念。
要设置子cookie,也有两种方法:set()和setAll()。以下代码展示了它们的构造。
5. 关于cookie 的思考
还有一类cookie 被称为“HTTP 专有cookie”。HTTP 专有cookie 可以从浏览器或者服务器设置,但
是只能从服务器端读取,因为JavaScript 无法获取HTTP 专有cookie 的值。
cookie 信息越大,完成对服务器请求的时间也就越长
23.3.2 IE用户数据(经测试仅在ie7下可以)
<div style="behavior:url(#default#userData)" id="dataStore"> var dataStore = document.getElementById("dataStore"); dataStore.setAttribute("name", "Nicholas"); dataStore.setAttribute("book", "Professional JavaScript"); dataStore.save("BookInfo"); dataStore.load("BookInfo"); alert(dataStore.getAttribute("name")); //"Nicholas" alert(dataStore.getAttribute("book")); //"Professional JavaScript"
和cookie 不同的是,你无法将用户数据访问限制扩展到更多的客户。还有一点不同,用户数据默认是可以跨越会话持久存在的,同时
也不会过期;数据需要通过removeAttribute()方法专门进行删除以释放空间。
23.3.3 Web存储机制
Web Storage 的两个主要目标是:
提供一种在cookie 之外存储会话数据的途径;
提供一种存储大量可以跨会话存在的数据的机制。
1. Storage 类型
只能存储字符串。非字符串的数据在存储之前会被转换成字符串。
2. sessionStorage 对象
和datastore的结构差不错啊,没有迭代sessionStorage 中的值
sessionStorage 对象应该主要用于仅针对会话的小段数据的存储。如果需要跨越会话存储数据,
那么globalStorage 或者localStorage 更为合适。
3. globalStorage 对象(在ff23.0.1的页面上测试有错:globalStorage is not defined,所以就不要用了,link,20130911)
用户未清除浏览器缓存, 存储在
globalStorage 属性中的数据会一直保留在磁盘上。这让globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置。
//保存数据 globalStorage["wrox.com"].name = "Nicholas"; //获取数据 var name = globalStorage["wrox.com"].name; //存储数据,可以让任何以.net 结尾的域名访问——不要这样做! globalStorage["net"].name = "Nicholas";
如果你事先不能确定域名,那么使用location.host 作为属性名比较安全。
globalStorage[location.host].name = "Nicholas"; var book = globalStorage[location.host].getItem("book");
4. localStorage 对象
//使用方法存储数据 localStorage.setItem("name", "Nicholas"); //使用属性存储数据 localStorage.book = "Professional JavaScript"; //使用方法读取数据 var name = localStorage.getItem("name"); //使用属性读取数据 var book = localStorage.book;
为了兼容只支持globalStorage 的浏览器,可以使用以下函数。
function getLocalStorage(){
if (typeof localStorage == "object"){
return localStorage;
} else if (typeof globalStorage == "object"){
return globalStorage[location.host];
} else {
throw new Error("Local storage not available.");
}
}
[align=left]5. storage 事件(这个在ff和chrome下也没反应,也没有报错,link)
[/align]
EventUtil.addHandler(document, "storage", function(event){
alert("Storage changed for " + event.domain);
});
6. 限制
localStorage :5MB 。Chrome 、Safari 是2.5MB。iOS 版Safari 和Android 版WebKit 2.5MB。
sessionStorage:有的浏览器没有限制,
但Chrome、Safari、iOS 版Safari 和Android 版WebKit ,2.5MB。
IE8+和Opera 5MB。
Web Storage 限制,请参考http://dev-test.nemikor.com/web-storage/support-test/。
23.3.4 IndexedDB
Indexed Database API,浏览器中保存结构化数据的一种数据库。
var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB ||
window.webkitIndexedDB;
IndexedDB Example 02 就遇到bug啦,不知道怎么解决,没有信心再看下去啦,详见论坛
request = database.setVersion("1.0");
alert(database.version); 应该是setVersion的问题,网上有一个例子就可以实现的
相关文章推荐
- JavaScript高级程序设计第23章(离线应用与客户端存储)
- JS高级程序设计23-离线应用与客户端存储
- JavaScript离线应用与客户端存储
- HTML5离线应用与客户端存储
- JavaScript笔记:离线应用与客户端存储
- js023-离线应用与客户端存储
- HTML5:离线应用与客户端存储
- 【JavaScript】离线应用与客户端存储
- 离线应用与客户端存储(待更)
- 国外海量数据离线存储产品应用
- 离线应用和本地存储
- HTML5五种客户端离线存储方案
- 利用离线应用模块开发智能客户端应用
- 12.本地存储和离线应用
- HTML5 Web 客户端五种离线存储方式汇总
- js-新兴的API,最佳实践,离线应用于客户端存储
- 应用程序存储和离线Web应用
- HTML5的五种客户端离线存储方案
- H5中离线应用存储-------------------明日完成
- HTML5 离线存储应用案例