web客户端存储小结

1.客户端存储的主要形式包括：web存储、cookie、IE userData、离线web应用、web数据库和文件系统API；

2.web存储：localStorage和sessionStorage

    localStorage和sessionStorage是window对象上定义的两个属性，支持大容量数据存储。这两个属性都代表同一个Storage对象--一个持久化关联数组。数组使用字符串来索引，存储的值也是字符串形式的。

    localStorage和sessionStorage的主要区别在于存储的有效期和作用域不同：数据可以存储多长时间以及谁拥有数据的访问权。

    localStorage存储的数据是永久性的，除非web应用可以删除存储的数据或者用户通过设置浏览器配合来删除，否则数据将一直留在用户的电脑上，永不过期。localStorage的作用域时限定在文档源级别的。同源的文档间共享同样的localStorage数据，可以互相读取对方的数据，甚至可以覆盖对方的数据。

    sessionStorage的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，name所有通过sessionStorage存储的数据都会被删除。sessionStorage的作用域也是限定在文档源中的，非同源文档间无法共享sessionStorage，并且，sessionStorage的作用域还被限定在窗口中，同源的文档渲染在不同的窗口中，则他们拥有各自的sessionStorage。

    相关的API和属性：

    setItem（“键”，值）；

    getItem（“键”，值）；

    removeItem（“键”）；

    clear（）；

    key(i);

    length ;

3.cookie

    cookie是一种早期的客户端存储机制，只适合存储少量的文本数据，任何以cookie形式存储的数据，不论服务器端是否需要，每一次http请求时都会把这些数据传输到服务器端。JavaScript中使用cookie不会采用任何加密机制，因此他们是不安全的。但是通过http来传输cookie数据是安全的。在大多数浏览器中，可以通过检测navigator.cookieEnable这个属性来判断cookie是否启用。

    cookie默认的有限期很短暂，它只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就丢失了。它的整个有限期和浏览器进程而不是单个浏览器窗口的有效期一致。可以通过设置max-age属性来设置cookie的有效期。

    cookie的作用域时通过文档源和文档路径来确定的，该作用域通过cookie的path和domain属性也是可以设置的，默认情况下，cookie和创建它的web页面有关，并对该页面以及和该页面同目录或者子目录的其他web页面可见。

    cookie的secure属性，一个布尔值，用来表明cookie的值以何种形式通过网络。

    要给当前的文档设置默认有效期的cookie值，只需要将cookie属性设置为一个字符串形式的值：

    document.cookie="vesersion="+encodeURIComponent(value);

    读取cookie的时候采用decodeURIComponent（）函数进行解码。为了更好地查看cookie，一般都会采用split（）方法将cookie中的名值对都分离出来。

    每个cookie保存的数据不能超过4KB，数量限制从20-300不等。

4.利用IE userData持久化数据

    IE5以及IE5以上的浏览器通过在document元素后面附件一个专属的“DHTML”行为来实现客户端存储。

var memory=document.creatElement('div');
memory.id="memory");
memory.style.display="none";
memory.style.behavior="url('#default#userData')";
document.body.appendChild(memory);

    使用getAttribute（）方法查询数据；

    使用setAttribute（）方法设置属性；    

    使用removeAttribute（）方法删除数据；

    默认情况下，通过userData存储的数据，除非手动删除，否则永远不会失效，可以通过设置expires属性来指定它的过期时间。

    IE userData的作用域限制在和当前文档同目录的文档中。IE userData允许存储的数据量比cookie大，但是比localStorage和sessionStorage允许存储的数据量小。

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

    Application Cache：HTML5引入了应用程序缓存，这意味着web应用可以进行缓存，并可以在没有因特网连接时进行访问，带来了三个优势：离线浏览--用户可以在应用离线时使用它们；速度--已经缓存的资源加载更快；减少服务器负载--浏览器将只从服务器下载更新过或更改过的资源。

    所有主流浏览器均已支持应用程序缓存，除了IE；

    如需启用应用程序缓存，请在文档的标签中包含manifest属性

    每个指定了manifest的页面在用户对其访问时都会被缓存，如果未指定manifest属性，则页面不会被缓存，除非在manifest文件中直接指定了该页面内。

    manifest文件的文件扩展名建议为：.appcache。注意，manifest文件需要配置正确的MIME-type，即：“text/cache-manifest”必须在web服务器上进行配置。

    manifest文件是简单的文本文件，它告知浏览器被缓存以及不被缓存的内容。manifest文件可分为三个部分：

    CACHE MANIFEST：在此标题下列出的文件将在首次下载后进行缓存；

    NETWORK：在比标题下列出的文件需要与服务器的连接，且不会被缓冲；

    FALLBACK：在比标题下列出的文件规定当前页面五访问时的回退页面；

    一旦应用被缓存，它就会保存直到发生下列情况：用户清空浏览器缓存；manifest文件被修改，更新注释行中的日期和版本号时一种使浏览器重新缓存的方法；由程序来更新应用缓存。

    一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件，为了确保浏览器更新缓存，需要更新manifest文件。