离线存储解决方案分析实现

随着HTML5的呼声逐渐增大，是时候将其中的DOM Storage纳入考量范围了。

DOM Storage

类似http session和cookies的两种全新机制：

Session Storage

• 会话存储是针对用户执行单个事务的方案而设计的。
• 应用于用户在同一时间（同一个会话期）跨多窗口运行同一事务的场景。
• 来自MDC的说法:它常用于临时存储那些需要保存的数据以便当浏览器不小心刷新时能够恢复它们。
• 它含有一个在页面会话有效期内可用的存储区域。
• 只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。
• 打开一个新的标签页或新窗口都会初始化新的会话。
• Internet Explorer 8:不会在浏览器故障得到恢复后继续使用 sessionStorage。
• Firefox也木有实现介个功能，参见：bug 33945 https://bugzilla.mozilla.org/show_bug.cgi?id=339445

Cookies不能很实时的处理这些情形：

如，某个用户在某站点购买机票时打开了两个不同的窗口，如果该站点使用cookies来记录用户的购买信息，那么，该用户在一个窗口中“已购买”的机票信息可能在另一个窗口中就被“漏”掉了，这将导致该用户在另一个窗口中得不到实时通知的情况下购买两张相同航班的机票。

sessionStorage接口的定义正是为了解决此情形，一个站点可以将它的数据添加到session storage，然后，该站点在某窗口中打开的任何页面都可以访问到此数据。

Local Storage

• 本地存储机制跨多个窗口，且持续范围可超过当前会话。localStorage属性可为域提供持久存储区域。
• 它可使得WEB程序能够存储MB级的用户数据，如，存储整个用户签名档或用户的收件箱。
• 它也为客户端性能的优化提供了一种解决方案。

        Cookies还是不能很好地处理这些情形，因为它每次请求时都会将值传送给服务器，而且数据会过期。

每个站点都会有它们各自的存储区域。

Storage对象接口定义

constructor:
    返回Storage对象的构造器引用（Object）

remainningSpace:
    返回Storage对象中剩余的内存数量（Bytes）

length:
    返回当前Storage对象中key/value配对列表的长度，只读，数字类型

key(n):
    返回当前Storage对象中key/value配对列表的第N个元素的key值，如果N>=length，则返回null

getItem(key):
    返回当前Storage对象中给定的key值（复制的）

setItem(key, value):
    复制一份给定的value（不支持包含ImageData的对象，报NOT_SUPPORTED_ERR）
    检测在当前Storage对象list中是否存在指定的key：
    如果不存在，则在该list中插入此key/value的配对。
    如果存在，则更新此key的value。
    如果操作失败，则报空间不足（QUOTA_EXCEEDED_ERR）异常。

removeItem(key):
    从当前Storage对象中移除指定的key值

clear():
    清空当前Storage对象中所有的key/value

sessionStorage对象

• sessionStorage作为Storage对象的实例，存在于浏览器全局作用域中，同源共用。
• 全局对象，可通过sessionStorage或window.sessionStorage访问。
• 生存周期为一个窗口或一个TAB的生存期间所加载的所有同源页面。
• session storage存储的内容只在用户请求的数据被删除或者存储空间不足时才会被设置过期。
• 当sessionStorage调用setItem,removeItem或clear方法并成功执行时，所有打开的窗口中的sessionStorage都会
• 被指向到相同的存储区域，且都会触发Storage对象的相应事件。

localStorage对象

• localStorage对象作为Storage对象的实例，存在于浏览器全局作用域中，同源共用。
• 每个域和子域都具有自己单独的本地存储区域。 域可以访问子域的存储区域，而子域也可以访问父域的存储区域。
• 注意：http://example.com域无法访问https://example.com中的localStorage数据。
• localStorage['example.com']  可由 example.com 及其任何子域访问。
• 子域 localStorage['www.example.com']可由 example.com 访问，但不能由其他子域访问，如 mail.example.com。
• 全局对象，可通过localStorage或window.localStorage访问。
• local storage存储的内容只有在用户提出请求或出于安全因素处理时才会被设置过期。

安全提示

1. 当请求违反存储限制时，抛出SECURITY_ERR异常（如用户设置不允许存储数据）。
2. 磁盘配额限制将施加于设置相应值的页面所在的域，而不是施加于在其中设置相应值的域。 这可防止恶意脚本用尽相关域的存储配额。 同时还可阻止此类脚本使用随机子域来存储无限数量的数据。
3. 如果来自非同源（源由协议、主机名（或 IP 地址）和域的 URL 的端口号确定）的脚本，抛出SECURITY_ERR异常并忽略其他步骤。
4. 如果文档来源不属于HTML5源时，抛出SECURITY_ERR异常并忽略其他步骤。
5. 存储在Storage中的数据未经过任何编码和加密，建议在使用的时候不要将敏感的重要的用户数据存储在Storage中。

当浏览器切换到private模式时（如果可以的话），localStorage存储的数据在浏览器模式改变后将被丢弃。

当localStorage调用setItem,removeItem或clear方法并成功执行时，所有打开的窗口中的localStorage都会被指向到相同的存储区域，且都会触发Storage对象的相应事件。

Storage事件（实现者）

当一个存储区域发生改变时，Storage事件即被触发，所有窗口中的Storage对象都将被影响。

事件定义

initStorageEvent():
    使用类似DOM Events接口的方式初始化事件

key:
    表示key被改变

oldValue:
    key被改变之前的值

newValue:
    key改变之后的值

url:
    表示该地址文档对象中的key被改变

storageArea:
    影响到的Storage对象

DOM Storage Events（IE8+）

当更新存储区域中的数据时，Internet Explorer 将触发相应事件，以便在浏览器或选项卡的多个实例之间能够保持信息同步。

onstorage

• 当存储区域发生更改时，document  中将触发  onstorage 事件。
• 所有共享相同会话上下文的文档，以及当前显示来自相同域或子域（即，本地存储将要提交到的域或子域）的页面的文档，都会接收到该事件。
• 如果目标文档对象当前未处于活动状态，则 Internet Explorer 不会触发任何事件。

onstoragecommit

• Internet Explorer 使用 XML 文件来存储本地存储数据。 将本地存储数据写入到磁盘上时，将触发  onstoragecommit 事件。

   
磁盘空间

每个域默认可以存储 5 MB 的数据，当超过时，需要提醒用户是否增加空间。
IE8+浏览器默认为 10 MB

userData Behavior

IE5+支持，允许对象存储数据在用户端

使用条件，为某对象设置behavior样式

html:
    <ELEMENT  STYLE="behavior:url('#default#userData')" ID=sID>

scripting:
    object.style.behavior = "url('#default#userData')"
    object.addBehavior("#default#userData")

userData对象成员表

expires:
    设置或返回userData的到期时间

XMLDocument:
    返回一个XML引用

load(user):
    加载指定user存储在userData中的数据对象

getAttribute(attr):
    返回指定attr的值

setAttribute(attr):
    设置指定attr的值

removeAttribute(attr):
    移除指定的attr值

save(user):
    保存指定user的数据对象到userData中

磁盘空间

本地：
    document limit:128KB，domain limit:1024KB
局域网：
    document limit:512KB，domain limit:10240KB
可信站点：
    document limit:128KB，domain limit:1024KB
互联网：
    document limit:128KB，domain limit:1024KB
受限站点：
    document limit:64KB，domain limit:640KB

安全提示

1. 为了安全考虑，userData存储的数据只对相同的目录，且使用相同的协议才能访问。
2. 存储在userData中的数据未经过任何编码和加密，建议在使用的时候不要将敏感的重要的用户数据存储在userData中。
3. 将userData行为应用在html,head,title,style等对象上时，使用save和load方法时将会发生错误。

Adobe Flash Player本地存储
存储空间: 100 KB

Cookie
存储空间: 4 KB

简单实现一个兼容新老浏览器的离线存储演示，简单判断是否可用localStorage，否则使用cookie.

在线演示DEMO：http://www.easyui.org.cn/domStorage.html

文章来自: DHTML精英,WEB前端专家!
引用通告: 查看所有引用 | 我要引用此文章
Tags: 离线存储离线存储 storagestorage cookiecookie