《JavaScript高级程序设计》学习笔记——客户端存储

第十九章 客户端存储

1.cookie

①最初是在客户端用于存储会话信息的。

1.1 限制

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

②cookie的限制：

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

□IE7和之后版本每个域名最多50个cookie。

□Firefox50个

□Opera50个

□Safari和Chrome无硬性规定

③cookie尺寸限制：4096字节（加减1）的长度限制。尺寸限制到一个域下所有的cookie，而非每个cookie单独限制。

1.2 cookie的成分

名称、值、域、路径、失效时间、安全标志。

1.3 JavaScript中的cookie

JavaScript操作cookie是通过BOM的document.cookie属性。

①当用来获取属性时，document.cookie返回当前页面可用的所有cookie的字符串，一系列由分号隔开的名-值对。

name1=value;name2=value2;name3=value3

所有名字和值都经URL编码，所以必须使用decodeURIComponent()来解码。

②用于设置值时，document.cookie属性可以设为一个新cookie字符串。设置document.cookie并不会覆盖cookie，除非设置的cookie名已经存在。设置前必须用encodeURIComponent()编码。

③没有删除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.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);

}

};

1.4 子cookie

①子cookie是存放单个cookie中更小段的数据。也就是使用cookie值来存储多个名称-值对。

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

□操作子cookie，get、getAll、set、setAll、unset、unsetAll：

var subCookieUtil = {

get : function(name, subName){

var subCookies = this.getAll(name);

if(subCookies){

return subCookies[subName];

}else{

return null;

}

},

getAll : function(name){

var cookieName = encodeURIComponent(name) + "=",

cookieStart = document.cookie.indexOf(cookieName),

cookieValue = null,

result = {};

if(cookieStart > -1){

var cookieEnd = document.cookie.indexOf(";",cookieStart);

if(cookieEnd == -1){

cookieEnd = document.cookie.length;

}

cookieValue = document.cookie.substring(cookieStart + cookieName.length,cookieEnd);

if(cookieValue.length > 0){

var subCookies = cookieValue.split("&");

for(var i=0, len=subCookies.length; i<len; i++){

var parts = subCookies[i].split("=");

result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);

}

return result;

}

}

return null;

},

Set : function(name, subName, value, expires, path, domain, secure){

Var subCookies = this.getAll(name) || {};

Subcookies[subName] = value;

This.setAll(name, subcookies, expires, path, domain, secure);

},

setAll : function(name, subcookies, expires, path, domain, secure){

var cookieText = encodeURIComponent(name) + "=";

var subcookieParts = new Array();

for(var subName in subcookies){

if(subName.length>0 && subcookies.hasOwnProperty(subName)){

subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));

}

}

if(cookieParts.length>0){

cookieText += subcookieParts.join("&");

if(expires instanceof Date){

cookieText += ";expires=" + expires.toGMTString();

}

if(path){

cookieText += ";path=" + path;

}

if(domain){

cookieText += ";path" + path;

}

if(secure){

cookieText += ";secure";

}

}else{

cookieText += ";expires=" + (new Date(0)).toGMTString();

}

document.cookie = cookieText;

},

unset : function(name, subName, path, domain, secure){

var subcookies = this.getAll(name);

if(subcookies){

delete subcookies[subName];

this.setAll(name, subcookies, null, path, domain, secure);

}

},

unsetAll : function(name, path, domain, secure){

this.setAll(name, null, new Date(0), path, domain, secure);

}

}

2.IE用户数据（不太实用，略之）

3.DOM存储机制

①DOM存储两个目标

□提供一种在cookie之外存储会话数据的途径。

□提供一种存储大量可以跨越会话存在的数据的机制。

②支持情况：

□Firefox2支持部分

□IE8+、Safari3.1+、Chrome1.0+、Firefox3.1+全部实现。

3.1 存储类型

①Storage类型用来存储最大限（因浏览器而异）的名值对。Storage的实例和其他对象行为一样，有下列额外的方法。

□clear()：删除所有值。

□getItem(name)：根据指定的名字name获取相应的值。

□key(index)：在指定的数字位置获取该位置的名字。

□removeItem(name)：删除由名字name指定的名值对。

□setItem(name, value)：为指定的名字name设置一个对应的值。

□可通过属性访问值。

3.2 sessionStorage对象

①sessionStorage对象存储特定于某个会话的数据，也即数据只保存到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在。

②sessionStorage对象绑定于某个服务器会话，所以文件在本地运行时不可用。存储在sessionStorage中数据只能由最初给对象存储数据的页面访问到，对多页面应用有限制。

③sessionStorage对象是Storage类型的实例。

3.3 globalStorage对象

①只在Firefox2中实现。跨越会话存储数据，并且有特定的访问限制。

//保存数据

globalStorage["wrox.com"].name = "Nicholas";

//获取数据

var name = globalStorage["wrox.com"].name;

3.4 localStorage对象

①localStorage上不能指定任何访问性规则；规则事先设定好了。为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

②数据保留到通过JavaScript删除或者是用户清除浏览器缓存。

用例：

localStorage.setItema("name","Nicholas");

localStorage.book = "Profession JavaScript";

var name = localStorage.getItem("name");

var book = localStorage.book;

③兼容globalStorage：

function getLocalStorage(){

if(typeof localStorage == "object"){

return localStorage;

}else if(typeof globalStorage == "object"){

retrun globalStorage[location,host];

}else{

throw new Error("no localstorage");

}

3.5 StorageItem类型

①Storage对象中所有存储的每个项目都是StorageItem的实例

□value属性：被存储的值。

□secure属性：只有脚本使用HTTPS协议访问页面才可设置。通过https访问默认为true。

3.6 storage事件

对storage对象进行修改，都会在文档上触发storage事件。其事件对象event有以下属性：

□domain：进行变更的存储的域名。

□key：进行设置或者是删除的键名。

□newValue：要将该键设为的值，如果是删除则为null。

□oldValue：被更改之前的值。

3.7 限制

DOM存储的限制也和浏览器相关。