第十八章：客户端存储

web应用允许使用浏览器提供的API实现将数据存储在用户电脑上。这种客户端存储相当于赋予了web浏览器记忆功能。比方说，web应用就可以用这些方式来“记住”用户的偏好甚至是用户的所有状态信息，以便准确地“回忆”起用户上一次访问的位置。客户端存储遵循“同源策略”，因此不同站点的页面是无法读取对于存储的数据。而同一站点的不同的页面之间是可以互相共享存储数据的，它为我们提供了一种通信机制，例如一个表单的数据可以显示在另一个页面中。web应用可以选择他们存储数据的有效期：比如采用临时存储可以让数据保存至当前窗口关闭或浏览器退出；采用永久存储，可以将数据永久地存储在硬盘上，数年或者数月不失效。

客户端存储有以下几种形式：

web存储

web存储最初作为HTML5的一部分被定义为API形式，但是后来被剥离出来作为独立的一份标准了。目前包含IE8在内的主流浏览器（可交互地）都实现了。web储存标准所描述的API包含localStorage和sessionStorage对象，这两个对象实际上是持久化的关联数组，是名值对的映射表，“名”和“值”都是字符串。web存储易于使用，支持大容量（但非无限量）数据存储同时兼容当前所有主流浏览器(但不兼容早期浏览器)，本章第一1节会对localStorage和sessionStorage这两个对象做详细介绍。

cookie

cookie是一种早期的客户端存储机制，期初是为征对服务器端脚本设计使用的。尽管在客户端提供了非常繁琐的javascript API来操作cookie，但它们难用至极，而且只适合少量的文本存储。不仅如此，任何以cookie形式存储的数据，不论服务器端是否需要，每一次HTTP请求都要把这些数据传输到服务器端。cookie目前仍然被大量的客户端程序员使用的一个重要的原因是：所有新旧浏览器都支持它。但是，随着Web Storage的普及，cookie将最终回归到最初的形态：作为一种被服务端脚本使用的客户存储机制。本章第2节将详细介绍cookie。

IE User Data

微软在IE5之后的IE浏览器实现了专属它的客户端存储机制-“User Data”。userData可以实现一定量的字符串数据存储，对于IE8前的IE浏览器，可以将其用做是Web存储的替代方案。关于userData的API会在本章第3节进行相关的介绍。

离线web应用

HTML5标准定义了一组“离线web应用”API，用于缓存web页面以及相关资源（图片，脚本，css文件等）。它的现实是将web应用整体存储在客户端，而不仅是存储数据。它能够让web应用“安装”在客户端。这样一来，哪怕网络不可用的时候web应用依然是可用的。离线web应用的相关内容会在本章第4节介绍。

web数据库

为了能够让开发者像使用数据那样操作大量的数据，很多主流浏览器纷纷实现在其中开始集成客户端数据库功能。Safari，chrome，和opera都内置了SQL数据库的客户端API。遗憾的是这类的API标准化最终以失败而告终，并且，Firefox和IE看来不打算实现这类API。目前还有一种正在标准化的API，称为“索引数据库API”。调用该API返回的是一个不包含查询术语的简单数据库对象。这两种客户端数据库API都是异步的，都使用了事件处理机制（类似DOM事件的机制），这样的方式多多少少都显得复杂，本章不会对它们做介绍。在20章第8节会简要介绍所有索引数据库API同时提供一些例子。

文件系统API

在第8章介绍过现代的浏览器都支持一个文件对象，用以将选择的文件通过XMLHttpRequest上传到服务器。与之相关的规范（草案阶段）定义了一组API，用于操作一个私有的本地文件系统。该系统中，可以进行对文件的读写操作。目前正在标准化当中。这些API在20章第7节中做介绍。这些API被广泛地实现和支持，web应用可以使用类似文件的存储机制，这对大部分程序员来说再熟悉不过了。

存储、安全和隐私

web浏览器通常会提供“记住密码”功能，这些密码会以加密的形式安全地存储在硬盘上。然而本章介绍的任何形式客户端数据存储都不牵扯加密：任何存储在用户硬盘上的数据都是未加密形式。

还要记住一点：很多web用户不信任那行使用cookie和其它客户端存储机制来做类似“跟踪”功能的网站。所以，尽量尝试本章讨论的存储机制来网站升级用户体验；而不是用它们来收集和侵犯隐私相关的数据。如果网站滥用客户端存储，用户将禁用该功能。这样一来不仅达不到效果，还会导致依赖客户端存储的网站完全不可用。

 

1.localStorage和sessionStorage

实现了“web存储”草案标准的浏览器在window对象上定义了两个属性，localStorage和sessionStorage。这练个属性代表同一个Storage对象——一个持久化关联数组，数组使用字符串来索引，存储的值也是字符串形式的，Storage对象在使用上和一般的javascript没有什么两样，设置对象的属性为字符串值，随后浏览器会将值存储起来。lcoalStorage和sessionStorage两者的区别在于存储的有效期和作用域不同：数据可以存储多长时间及拥有数据的访问权。

下面我们对存储的有效期和作用域进行详细的解释。不过，再此之前，我们看些例子，下面的代码使用的是localStorage，但是它对sessionStorage同样适用：

            var name = localStorage.username; //查询一个存储的值
            name = localStorage["username"]; //等于数组表示法
            if (!name) {
                name = prompt("请输入你的名字"); //询问用户一个答案
                localStorage.username = name; //存储用户的答案
            }
            
             //迭代所有存储的那么/value对
            for (var name in localStorage) { //迭代所有存储的名字
                var value = localStorage[name]; //查询每个名字对应的值
            }

Storage对象还定义了一些诸如存储、获取、遍历和删除的方法。这些方法会在第ii小节中介绍。

“web存储”草案标准指出，我们既可以存储结构话的数据（对象和数组），也可以存储原始类型数据，还可以存储诸如日期、正则表达式甚至是文件对象在内的内置类型和数据。（在一些浏览器中，仅仅支持存储字符串类型数据，如果要存储和其它类型的书，不得不自己手动进行和编码解码），如下例子所示：

             //当存储一个数字的时候，会自动转换成一个字符串
             //但是，当获取该值的时候，别忘了手动转换成数字类型
            localStorage.x = 10;
            var x = parseInt(localStorage.x); //
            
            //同样，存储一个日期类型数据的时候进行编码，获取的时候进行解码
            localStorage.lastRead = (new Date()).toUTCString();
            var lastdate = new Date(Date.parse(localStorage.lastRead));
            
            
            //使用JSON可以使得对基本数据类型的编码规则变得很方法
            var data = new Date();
            localStorage.data = JSON.stringify(data)//编码后存储
            var data = JSON.parse(localStorage.data)//获取数值后再解码

 i.存储有效期和作用域

localStorage和sessionStorage的区别在于存储的有效期和作用域不同。通过localStorage存储的数据是永久性的，除非web应用立刻删除存储的数据。或者用户通过设置浏览器配置（浏览器提供的特定UI）来删除，否则数据将一直保留在用户电脑上，永不过期。

localStorage的作用域是限定在文档源（document origin）级别的。正如11章6节ii小节描述的，文档源是通过协议、主机名及端口三者来确定的。因此，每个url都有不同的文档源。

        http://www.ahthw.com //协议：http；主机名:www.ahthw.com
        https://www.ahthw.com //不同协议
        http://study.ahthw.com //不同主机名
        http://www.ahthw.com:8080 //不同端口

同源文档间共享localStorage数据（不论该源的脚本是否真正的访问的localStorage）。它们可以互相读取对方的数据，甚至可以覆盖对方的数据。但是，非同源的文档见互相都不能读取和共享或覆盖对方的数据（即使它们的脚本来自同一台第三方服务器也不行）。

需要注意的是localStorage的作用域也收到浏览器供应商的限制。如果你使用的Firefox访问站点那么下一次用另外一个浏览器打开的时候，那么本次是无法获取上次的数据的。

通过sessionStorage存储的数据和通过localStorage存储的数据有效期也是不同的：sessionStorage的有效期存储数据的脚本所在最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也被删除了（需要注意的是，现代的浏览器具备了一些关闭标签页随后恢复上一次浏览器回话的功能，可能预知相关的sessionStorage会更长些）。

和localStorage一样，sessionStorage的作用域也是限定在文档源中，因此，非同源的文档之间是无法贡献sessionStorage的。

需要注意的是：这里提到的基于窗口作用域的sessionStorage指的窗口是顶级窗口。如果一个浏览器标签包含两个<iframe>元素，它们是同源的，那么两者之间是可以共享的sessionStorage的。

ii.存储API

localStorage和sessionStorage通常是被当做普通的javascript对象使用。通过设置属性来存储字符串值，查询该属性来读取该值。这两个对象还提供了两个正式的API，调用setItem()，将对于的名字和值传递进去，可以实现数据存储。调用getItem()方法，将名字传递进去，能获取对于的值。调用removeItem()方法，将名字传递进去，可以删除对于的数据。（在非IE8的浏览器中，还可以使用delete操作符来删除数据，就和普通对象使用的delete操作符一样）调用clear()方法（不需要参数），可以删除所有存储的数据。最后，使用length和key()方法，传入0~length~1的数字，可以枚举所有存储数据的名字。下面是使用localStorage的例子，下面这些代码对sessionStorage也适用。

            localStorage.setItem("x", 1); //以"x"的名字存储一个数值
            localStorage.getItem("x"); //获取x的数值
            
            //枚举所有的存储的名字/值对
            for(var i = 0;i<localStorage.length;i++){//length 表示了所有名字/值对
                var name = localStorage.key(i); //获取第i对的名字
                var value = localStorage.getItem(name);//获取该对的值
            }
            
            localStorage.removeItem("x")//删除"x"项
            localStorage.clear();//全部删除

尽管通过设置和查询属性能更加方便地存储和获取数据，但是有些时候还是不得不适应上面所提到的这些方法。比方说其中clear()方法是唯一能删除存储对象中的名/值对的方式。同样的还有，removeItem()是也是唯一通过山粗单个名/值对的方式。（因为IE8不支持delete操作符）。

如果浏览器提供商完全实现了“web存储”的标准，只对对象和数组类型的数据存储，那么就会又多了一个使用类似用setItem()和getItem()这类方法的理由。对象和数组的值通常是可变的，因此存储要也要求存储它们的副本，以确保之后对任何这类对象的改变不影响到存储的对象。同样的 ，在获取该对象的时候，也要求获取是该对象的副本，以确保已获取的对象的改动不会影响到存储的对象。而这类操作如果如果使用基于属性的API就会令人困惑。考虑如下这段代码（假设浏览器已经支持了结构化数据存储）。

        localStorage.o = {x:1};//存储一个带有"x"属性的对象
        localStorage.o.x = 2; //试图设置该对象的属性值
        localStorage.o.x; //=>undefined x没有改变

上述的第二行代码要设置存储对象的属性值，但事实上，它获取到的只是存储的对象的副本，随后设置了该对象的属性值，然后就将该副本废弃了。真正的存储对象保持不变。对于这种情况，使用getItem()就不会让人这么困惑了。

        localStorage.getItem("o").x = 2;//我们并不像存储2

另外，还有另外一个显式的机遇存储API的理由就是：在还不支持“web存储”标准的浏览器中，其它的存储机制的顶层API对其也是兼容的。下面这段代码使用cookie和IE userData来实现存储API。如果使用基层方法的API，当localStorage可用的时候就可以使用它编写代码，而当它在其它浏览器上不可用的时候依然可以依赖于其它的存储机制（完全兼容）。如下代码所示：

             //识别出是哪类存储机制
            var memory = window.localStorage || (window.userDataStorage && new userDataStorage()) || new cookieStorage();
             //然后在对于的机制中查询数据
            var username = memory.getItem("username");

iii.存储事件

无论什么时候，存储在localStorage或者sessionStorage的数据发生改变，浏览器都会在其它对该数据可见的窗口对象上出发存储事件（但是在对数据改变的窗口上是不出发的）。如果浏览器有两个标签页都打开了来自于同源的页面，其中一个在localStorage上存储了数据，那么在另外一个标签页就会接受到一个存储事件。要记住，sessionStorage的作用域是限制在顶层窗口的，因此对于sessionStorage的改变只有相关牵连的窗口才会触发存储事件。像给已经存在的存储项设置一个一模一样的值，或者是删除一个本来就不存在的项存储都是不会触发存储事件的。

为存储事件注册处理程序可以通过addEventListener()方法，（或者在IE下使用attachEvent方法）。在绝大多浏览器中，还可以给Window对象设置onstorage属性的方法，不过Firefox不支持该属性。

与事件相关的事件对象有5个非常重要的属性（遗憾的是IE8不支持他们）

key

被设置或移除项的键名。如果调用clear()函数，那么该属性值就为null.

newValue

保存该项新值；或者调用removeItem()时，该属性值为null。

oldvalue

改变或删除该项前，保存该项的原先值；当插入一个新项的时候，该属性值为null

storageArea

这个属性值就好比目标window对象上的locaStorage属性或者是sessionStorgae属性

url

触发该存储变化脚本所在的文档URL

最后，要注意的是：localStorage和sessionStorage存储机制都是广播机制的，浏览器会对目前正在访问的同源站点所有窗口发送消息。举个例子：如果一个用户要求网站停止动画效果时，那么该站点可能会在localStorage中存储该用户的首选项，这样依赖，以后再访问该站点的时候自动停止该动画效果了。因为存储了首选项，导致触发的一个存储事件让其它的同源页面也获得了一个用户请求。再比如，一个机遇web的图片编辑应用，通常允许在其它窗口中展现工具条。当用户选择一个工具的时候，应用就可以使用localStorage来存储用户的当前状态，然后通知其它的窗口用户选择了新的工具。

2.cookie

cookie是指web浏览器存储少量的数据，同时它是与具体的web页面或者站点相关的。cookie是最早是设计为被服务端所有的，从底层来看，作为HTTP协议的一种扩展实现它。cookie数据会自动在web浏览器和web服务器之间传输的，因此服务端脚本就可以读、写客户端的cookie值。本书介绍客户端脚本通过使用Document对象读取cookie属性实现cookie的操作。

 为什么叫cookie：“cookie”这个词没有太多的含义，但是在计算机历史上其实很早就用到它了。“cookie”和“magic cookie”用于代表少量数据，特别是指类似密码这种识别身份或者许可访问的保密数据。在javascript中，cookie用于保存状态以及能够为web浏览器提供一种身份识别。但是，javascript中使用cookie不会采取任何加密机制，因此是不安全的。（但是通过https传说cookie数据是安全的，不过这和cookie本身无关，而和https：协议相关）

操作cookie的api很早就已经定义和实现了，因此次API的兼容性很好。但是，该API的兼容性很好。但是，该API几乎形同虚设。根本没有提供诸如查询、设置、删除cookie对象的方法，所有这些操作都要通过特殊格式的字符串形式读写Document对象的cookie属性来完成。每个cookie的有效期和作用域都可以通过cookie属性分别指定。这些属性也是通过在同一个cookie上以特殊的字符串来设定的。

本节剩余的部分会解释如何通过cookie属性来指定cookie的有效期和作用域，以及如何通过javascript来设置和查询cookie值。最后实现一个“基于cookie的存储api”例子结束本章。

检测cookie是否可用

用于滥用第三方cookie（如cookie是个网页上的图片相关而非网页本身相关）的缘故，导致cookie在大多数web用户心中有不好的印象。很多用户禁用或限制了cookie，因此在师院javascript操作cookie前，首先要确保cookie是启用的。在绝大多数浏览器中，可用通检测过navigator.cookieEnabled这个属性来实现，若为true则表明cookie是启用的。在不支持该属性的浏览器上，要用下面介绍的cookie技术来读、写和删除cookie数据来测试是否支持cookie。

i.cookie属性：有效期和作用域

除了名（name）和值（value），cookie还有一些可选的属性来控制cookie的有效期和作用域。cookie的默认有效期很短暂；它只在持续在web会话期间，一旦关闭浏览器，cookie的保存数据就丢失。需要注意的是这与sessionStorage有效期还是有区别的，cookie的作用域并不是限在浏览器的单个窗口中，它的有效期和整个浏览器进程不是单个浏览器窗口的有效期一一致。如果要延长cookie有效期，可以通过设置max-age属性，但必须要明确告诉cookie的有效期是多长，单位是秒。

一旦设置了有效期，浏览器就会将cookie数据存储在一个文件中，并且知道过了指定的有效期才会删除该文件。

和localStorage以及sessionStorage类似，cookie的作用域是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性配置的。在默认的情况系啊，cookie和创建它的web页面有关，并对该web页面及和该web页面同目录或者子目录其它的页面可见。

比如web页面http://www.a.com/a/index.html页面创建了一个cookie，那么该cookie对http://www.a.com/a/b.html和页面http://www.a.com/a/b/index.html页面都是可见的。但对http://www.a.com/c.html是不可见的。

默认的cookie的可见性行为满足了最常见的需求。不过，有的时候，你可能希望整个网站都使用cookie的值，而不管是那个页面创建它的。比如用户在一个页面表单上输入了它的邮件地址，你想把它保存下来，为了不让用户下次回到这个页面上将其作为默认的邮件地址。要满足这样的需求，可以设置cookie的路径（设置cookie的path属性）。

将cookie的路径设置成"/"等于是让cookie和localStorage拥有同样的作用域，同时当它请求该站点上任何一个web页面的时候，浏览器都必须将cookie的名字和值传递给服务器。但是需要注意的是，cookie的path属性不能被用做访问控制机制。如果一个web页面想要读取同一站点其它页面的cookie，只需要将其他页面隐藏<iframe>形式加载进来，随后读取对应文档的cookie就可以了。同源策略限制了跨站的cookie窥探，但是对同一站点的文档是完全合法的。

cookie的作用域默认由文档源限制。但是，有的大型网站想要子域之间能够相互通信cookie，这个时候就需要设置coolkie的domian属性来达到目的。如果http://well.a.com的域下创建了一个cookie，并将其path属性设置成"/"，其domian属性设置成".a.com",那么这个cookie就对所有good.a.com，other.a.com以及任何其它a.com域下任何其它服务器都可见。如果没有为一个cookie设置域属性，那么domian属性的默认值是当前web服务器的主机名。要注意的是，cookie域只能设置当前服务器的域。

最后要介绍的cookie的属性是secure,它是一个布尔值属性，用来表明cookie的值是以何种网络传输。cookie默认是以不安全的形式（通过普通的、不安全的HTTP连接）传递的。一旦cookie被标识为“安全的”，那就只能当前浏览器和服务器通过https或者其它安全协议连接的时候才能传递它。

ii.保存cookie

要给当前文档设置有效的cookie值，非常简单，只需将cookie属性设置为一个字符串的形式的值；

name = value;

如下：

document.cookie = "version=" + encodeURIComponent(document.lastModified);

下次读取cookie属性的时候，之前存储的名/值对的数据就在cookie列表中。由于cookie的名/值中不允许包含分号、逗号和空白符，因此，在存储之前一般可以采用javascript核心的全局函数encodeURIComponent()进行编码。相应的，读取cookie值的时候需要采用decodeURICompoent()函数解码。

以简单的名/值对形式存储的cookie数据有效期只在当前的web浏览器会话内，一但用户关闭浏览器，cookie数据就丢失了。如果小要延长cookie的有效期，就需要设置max-age属性来指定cookie的有效期（单位是秒）。按照下面的字符串形式设置cookie的属性即可。

name = value; max-age = seconds

下面设置一个cookie值，并提供一个max-age属性

             //以名/值对形式存储cookie
             //同时采用encodeURIComponet()函数进行编码，来转义分号、逗号和空白符
             //如果dayTolive是一个数字，设置max-age属性为该数值表示cookie知道指定的天数
             //到了才会过期。如果daysTolive是0就表示删除cookie
            function setcookie(name, value, daysTolive) {
                var cookie = name + "=" + encodeURIComponent(value);
                if (typeof daysTolive === "number")
                    cookie += "; max-age =" + (daysTolive * 60 * 60 * 24);
                document.cookie = cookie;
            }
            setcookie("cook","cool",0);

同样地，如果要设置cookie的path、domian和secure属性，只需如下的字符串追加在cookie的值的后面

            ;path = path
            ;domain = domian
            ;secure

要改变cookie的值，需要使用相同的名字、路径和域，但是新的值重新设置cookie的值。同样地，设置新max-age属性就可以改变cookie的有效期。

要删除一个cookie，需要使用相同的名字、路径和域，然后制定一个任意（非空）的值，并将max-age属性指定为0，再次设置cookie。

iii.读取cookie

使用javascript表达式来读取cookie属性的时候，其返回的值是一个字符串，该字符串都是由一系列的名/值对组成，不同名/值对之间通过“分号/空格”分开，其内容包含了所有作用在当前文档的cookie。但是当它不包含其它设置的cookie属性。通过document.cookie属性可以获取cookie的值，但是为了更好地查看cookie值，一般会采用split()的方法将cookie值中的名/值对都分离出来。

把cookie的值从cookie属性分离出来之后，必须要采用相应的解码方式（取决于之前存储cookie值时的采用的编码方式），把值还原出来。比如，先采用decodeURIComponent()方法把cookie的值解码出来，之后再利用JSON.parse()方法转换成json对象。

下面的例子定义了一个getcookie()函数，该函数将document.cookie属性的值解析出来，将对应的名/值存储到一个对象中，函数最后返回该对象。

             /**解析document.cookie属性的值**/
             //将document.cookie的值以名/值对组成一个对象返回
             //假设存储cookie的值的时候是采用encodeURIComponent()编码的
            function getcookie() {
                var cookie = {}; //初始化要返回的对象
                var all = document.cookie; //在一个大写的字符串中获取所有的cookie值
                if (all === "") //如果cookie为空字符串
                    return cookie; //返回一个空对象
                var list = all.split(";"); //分离出名/值对
                for (var i = 0; i < list.length; i++) { //遍历每个cookie
                    var cookie = list[i];
                    var p = cookie.indexOf("="); //查找第一个"="符号
                    var name = cookie.substring(0, p); //获取cookie名字
                    var value = cookie.substring(p + 1); //获取cookie对应的值
                    value = decodeURIComponent(value); //对其值进行解码
                    cookie[name] = value; //将名/值对存储到对象中
                }
                return console.log(cookie);
            }

3.利用IE userdata持久化数据

IE以及IE5以上的浏览器是通过在document元素后附件一个专属的"DHTML行为"来实现客户端存储的。如下代码所示：

            var memory = document.createElement("div"); //创建一个元素
            memory.id = "_memory";
            memory.style.display = "none";
            memory.style.behavior = "url('default#userData')"; //附加userData行为
            document.body.appendChild(memory); //添加到document元素中

  一旦元素赋予了"userData"行为，该元素就拥有load()和save()方法。load()方法用于载入存储的数据。使用它的时候必须传递一个字符串作为参数--类似一个文件名，该参数用来指定要载入的存储数据。当数据载入后，就可以通过该元素的属性来访问这些名/值对形式的数据，可以使用gettAttribute()来查询摄像数据。通过setAttribute()方法设置属性。然后调用save()方法可以存储新的数据；而要删除数据，通过使用removeAttribute()方法然后调用save()方法即可。如下所示（该例使用了此前例子中初始化的那个memory元素）：

            memory.load("mySoredData"); //根据指定名，载入对于的数据
            var name = memory.getAttribute("username"); //获取其中数据片段
            if (!name) { //如果没有指定的数据片段
                name = prompt("请输入"); //
                memory.setAttribute("username", name); //将其设置成memory元素的一个属性
                memory.save("mySoredData")
            }

默认情况下，通过userData存储的数据，除非手动去删除它否则永不失效。但是，也可以通过设置expires属性来指定它的过期时间。就拿上面的例子来说，可以给存储的数据设置时长为100天的有效期，如下所示：

            var now = (new.Date()).getTime(); //获取当前时间，以毫秒为单位
            var expires = now + 100 * 24 * 60 * 60 * 1000; //100天的毫秒算法
            expires = new Date(expires).toUTCString(); //将其转换为字符串。
            memory.expires = expires; //设置userData的过期时间

IE userData的作用域限制在和当前文档同目录的文档中。它的作用域没有cookie宽泛，cookie对其所在目录下的子目录也有效。userData的机制并没有像cookie那样，通过设置path和domain属性来控制或改变其作用域的方式。

userData允许存储的数据量要比cookie大，但是却比localStorage和sessionStorage允许的存储量的数据量要小。

下面的例子基于IE的userData实现存储了API提供的getItem(),setItem()以及removeItem()方法（但是它没有实现key()或者clear()方法，原因是userData并没有定义遍历所有存储项的一种方法）

            /**基于IE的userData实现部分存储的API**/
            function UserDataStorage(maxage){
                //创建一个document元素加载userData行为
                //因此该元素获得save()和load()方法
                var memory = document.createElement("div"); //创建一个元素
                memory.style.display ="none"; 
                memory.style.behavior = "url('#default#userData')";//附加userData行为
                document.body.appendChild(memory);//添加到document元素中
                
                //如果传递了maxage参数（单位为秒），则将其设置为userData的有效期，以毫秒为单位
                if(maxage){
                    var now = new Date().getTime();//当前时间
                    var expires = now + maxage * 1000;//当前时间加上有效期就等于过期时间
                    memory.expires = new Date(expires).toUTCString();
                }
                
                //通过载入存储的数据来初始化memory元素
                //参数是任意的，只要是在保存的时候存在就可以了。
                memory.load("userDataSotrage"); //载入存储的数据
                
                this.getItem = function(key){//通过属性来获取保存的值
                    return memory.getAttribute(key) || null ;
                };
                this.setItem = function(key,value){
                    memory.setAttribute(key,value);//以设置属性的形式来保存数据
                    memory.save("userDataSotrage"); //保存数据改变后的状态
                };
                
                this.removeItem = function(key){
                    memory.removeAttribute(key); //删除存储的数据
                    memory.save("userDataSotrage"); //再次保存状态
                };
            }

由于上述代码只在IE浏览器下有效，最好使用IE条件注释来避免其他浏览器载入上述代码。

        <!--[if IE]>
        <script src="userDataStorage.js"></script>
        <![endif]-->

 

（文文未结束，欢迎大家关注上章内容：第十七章：jQuery类库 ）

3.应用程序存储和离线web应用