第十九章 客户端存储 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=" + domian; } 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存储的限制也和浏览器相关。

　　推荐阅读

　　简短几句jquery代码的实现一个图片向上滚动切换

animate()参数介绍： animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 只有数字值可创建动画（比如 "margin:>>>详细阅读

本文标题：JavaScript高级程序设计 客户端存储学习笔记

地址：http://www.17bianji.com/kaifa2/JS/24205.html

 1/2    1