随着web应用程序的出现，产生了要直接在客户端存储用户信息能力的需求。下边就是几种具体的解决方案。

一、Cookie

cookie最初是用于在客户端存储会话信息的，该标准要求服务器对任意HTTP请求(没有cookie头部)发送Set-Cookie头部作为响应的一部分。当浏览器接受到响应以后根据头部信息，设置一个cookie并存储。当浏览器再次对该服务器发送请求时，就会为请求添加Cookie头部。对cookie更加详细的描述如下：

  1、限制
  cookie是绑定在特定域名下的，当设定一个cookie后，当给创建它的域名发送请求时才会包含这个cookie；
  cookie是存储在客户端计算机上的，为了不占用太多磁盘空间，每个域的cookie总数是有限制的，具体数量限制因浏览器不同存在差异；
  浏览器对cookie的尺寸也有限制，大多数浏览器对cookie的长度限制在4096B(加减1)；

2、cookie的构成
cookie主要由以下几块信息构成：名称(不区分大小写)、值、域、路径、失效时间、安全标志；安全标志直接包含了一个单词secure，设置该标志以后，只能在SSL连接时才能传输。除此以外，其他标志都由名值对儿构成；

3、JavaScript中的cookie
JavaScript中处理cookie时，主要用document.cookie这个属性：当用来获取属性值时，document.cookie返回当前页面可用的所有cookie的字符串，一系列由分号隔开的名值对儿(所有名字和值都是经过URL编码的，必须使用decodeURIComponent()来解码)；当用来设置属性的时候，document.cookie属性可以设置一个新的cookie字符串。并添加到现有的cookie集合中；

4、子cookie
为了绕开浏览器的单域名下的cookie数量限制，开发人员采用子cookie的方法。子cookie是存放在单个cookie中的更小段数据。

二、IE用户数据

IE5.0中，微软引入了持久化用户数据的概念，用户数据允许每个文档最多128KB，每个域名最多1MB的数据。要使用持久化用户数据，首先要使用CSS在某个元素上指定userData行为，然后就可以使用setAttribute()方法在上边保存数据，最后调用save()方法将数据保存到浏览器缓存中，save的参数为保存到数据空间的名称。举例如下：

<div style="behavior: url(#default#userData)" id="dataStore"></div>
<script>
    var dataStore=document.getElementById('dataStore');
    dataStore.setAttribute('name','Jack');
    dataStore.setAttribute('book','JavaScript');
    dataStore.save('BookInfo');    
</script>

下一次载入页面后，可以使用load()方法指定同样的数据空间名称(本例的BookInfo)来获取数据。

三、Web存储机制

  Web Storage规范如今已经成为HTML5的一部分。主要是用来克服由cookie带来的一些限制：当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。它的两个主要目的是：
  提供一种在cookie之外存储会话数据的途径；
  提供一种存储大量可以跨会话存在的数据的机制
  Web Storage规范定义了以下几个对象。在支持他们的浏览器中，以windows对象属性的形式存在。

  1、Storage类型
  Storage类型提供最大的存储空间来存储名值对儿。其实例有以下方法：
   clear()：删除所有值；
   getItem()：根据指定的名字(name)获取对应的值；
   key(index):获取index位置处的值的名字；
   removeItem(name):删除由name指定的名值对儿；
   setItem(name,value):为指定的name设定指定的值；

2、sessionStorage对象
sessionStorage对象是Storage的一个实例。用来存储特定于某个会话的数据，即该数据只保持到浏览器关闭。由于该对象绑定于某个服务器会话，所以当文件在本地运行时是不可用的。

3、globalStorage对象
该对象的目的是跨越会话存储数据，但是有特定的访问限制，要使用globalStorage，首先要指定哪些域可以访问该数据

4、localStorage对象
localStorage对象也是Storage的实例，在HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。要访问同一个localStorage对象，页面必须来自同一个域名(相同子域名无效)，使用同一种协议，在同一个端口上。

  5、storage事件
  对Storage对象做任何修改，都会在文档上触发storage事件，这个事件的event对象有以下属性：
   domain：发生变化的存储空间的域名；
   key：设置或者删除的键名；
   newValue：如果是设置值，则该属性值为新值，如果是删除键，该属性值为null；
   oldValue：键被更改之前的值；

web数据存储

一、Cookie

二、IE用户数据

三、Web存储机制

猜你喜欢