Web数据存储浅析 Cookie、UserData、SessionStorage、WebSqlDatabase

所属分类: 网页制作 / 应用技巧 阅读数: 402
收藏 0 赞 0 分享

Cookie

它是标准的客户端浏览器状态保存方式,可能在浏览器诞生不久就有Cookie了,为什么需要Cookie 这个东东?由于HTTP协议没有状态,所以需要一个标志/存储来记录客户浏览器当前的状态,保证客户浏览器和服务器通讯时可以知道客户浏览器当前的状态。Cookie就是记录这个状态的容器,Cookie在每次请求的时候都被带回到服务器,从而保证了Server可以知道浏览器当前的状态,由于Cookie会被带回到Server,所以Cookie的内容不能存太多,最多不能超过4K,4K 限制的介绍 http://ec.europa.eu/ipg/standards/cookies/index_en.htm
其中一段内容为:

A browser is only required to store up to 300 cookies overall and maintain only the last 20 from each domain. The maximum size of a cookie is 4K of disk space.

但是在一些场景下可能需要存储超过4K或者更多的数据,但是这些数据不用在每次请求的时候被带回到服务器,只要能在客户的浏览器上保存住,并且可以方便的被Javascript读写就可以了,这种需求尤为在中大型RIA的应用场景下更加的迫切,部分数据放在客户浏览器,节约带宽,提高浏览速度。HTML5标准已经替我们想到了满足这种需求的方案:sessionStorage , webSqlDatabase, 微软的IE 有 userData 方案。


userData
微软对USERDATA的介绍: http://msdn2.microsoft.com/en-us/library/ms531424(VS.85).aspx
其中一段内容为:

Security Alert:For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store.
Security Alert:Using this behavior incorrectly can compromise the security of your application. Data in a UserData store is not encrypted and therefore not secure. Any application that has access to the drive where UserData is saved has access to the data. Therefore, it is recommended that you not persist sensitive data like credit card numbers. For more information, see Security Considerations: DHTML and Default Behaviors.
……
The userData behavior persists data across sessions, using one UserData store for each object. The UserData store is persisted in the cache using the save and load methods. Once the UserData store has been saved, it can be reloaded even if Microsoft Internet Explorer has been closed and reopened.
Setting the userData behavior class on the html, head, title, or style object causes an error when the save or load method is called.

 

userData可以在同目录同协议下相互访问,长期存储在客户机器上。最大存储空间也增大了很多。userData需要绑定到一个Dom元素上使用。在userData的method中有removeAttribute方法。经过测试代码发现removeAttribute方法好像不是很管用,需要使用像cookie过期的方式,才可以彻底的删除一个userData Attribute。
http://www.itwen.com/04web/11skill/skill20060918/60588.html 中介绍说userData存储在X:\Documents and Settings\当前用户\UserData\ 目录下。具体细节MS在userData说明文档中没有具体说明。


sessionStorage
HTML5 标准对 sessionStorage的介绍: http://www.whatwg.org/specs/web-apps/current-work/
其中对 sessionStorage 的介绍:

This specification introduces two related mechanisms, similar to HTTP session cookies [RFC2965], for storing structured data on the client side.
The first is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.
Cookies dont really handle this case well. For example, a user could be buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.
To address this, this specification introduces the sessionStorage DOM attribute. Sites can add data to the session storage, and it will be accessible to any page from that origin opened in that window.

Html5 sessionStorage Demo: http://html5demos.com/storage
下面是根据 http://www.blogjava.net/emu/archive/2006/10/04/73385.html 中提到的IE FF 兼容userData的测试代码:

复制代码
代码如下:

function isIE() {
return !!document.all;
}
function initUserData() {
if (isIE()) document.documentElement.addBehavior("#default#userdata");
}
function saveUserData(key, value) {
var ex;
if (isIE()) {
//IE
with (document.documentElement) try {
load(key);
setAttribute("value", value);
save(key);
return getAttribute("value");
} catch (ex) {
alert(ex.message)
}
} else if (window.sessionStorage) {
//FF 2.0+
try {
sessionStorage.setItem(key, value)
} catch (ex) {
alert(ex);
}
} else {
alert("Error occured in user data saving. your browser do not support user data.");
}
}
function loadUserData(key) {
var ex;
if (isIE()) {
//IE
with (document.documentElement) try {
load(key);
return getAttribute("value");
} catch (ex) {
alert(ex.message); return null;
}
} else if (window.sessionStorage) {
//FF 2.0+
try {
return sessionStorage.getItem(key)
} catch (ex) {
alert(ex)
}
} else {
alert("Error occured in user data loading. your browser do not support user data.")
}
}
function deleteUserData(key) {
var ex;
if (isIE()) {
//IE
with (document.documentElement) try {
load(key);
expires = new Date(315532799000).toUTCString();
save(key);
}
catch (ex) {
alert(ex.message);
}
} else if (window.sessionStorage) {
//FF 2.0+
try {
sessionStorage.removeItem(key)
} catch (ex) {
alert(ex)
}
} else {
alert("Error occured in user data deleting. your browser do not support user data.")
}
}

userData和sessionStorage共同的特点就是:这两个对象都可以存储比cookie大的多的多内容。并且不会随每次请求带回到服务器端。但是根据Html5标准和测试发现userData和sessionStorage有很多地方是不同的。

下面是一个测试页面:
31_110118_jg9ncookieVsStoragegif 

其中的 SetInsurance link 会操作javascript 在IE下用userData写数据, 在FF下用sessionStore写数据。在IE下的情况是:关闭IE或者重启机器写入的值都不会丢失。在FF下的情况很有意思:在本页面写入的值在本页面可以访问,在由本页面所打开的其它页面可以访问。但是就算本页面开着,在导航栏里输入地址,打开本页面,存入的值就不能访问了。在本页面存入的值,在它的父页面(打开这个页面的页面)是访问不到的。又看了看Html5标准。sessionStorage 的全名是:Client-side session and persistent storage of name/value pairs 意思估计是存储在Client的内容是有session 会话的,存储的值由session会话所维系,一旦session会话中断或者丢失,存入的值也就随之消失了。所以当页面没有session(父页面,由地址栏打开的页面),是取不到值的。当FF关闭或者重启机器必然也就取不到值了。


webSqlDatabase
webSqlDatabase在HTML5 标准中是非常Cool的一个东东, 用Javascript写SQL查询,数据库就在浏览器里,这在以前几乎不敢想象。不过今天Safari, Chrome, Opera 都已经支持了,两个webSqlDatabase 的 Demo 页面: http://html5demos.com/database http://html5demos.com/database-rollback
W3C 对WEBSQLDATABASE 的介绍页面: http://dev.w3.org/html5/webdatabase/
WiKi上一个简明的说明: http://en.wikipedia.org/wiki/Web_SQL_Database

From W3C: "...an API for storing data in databases that can be queried using a variant of SQL"
Web SQL Database is supported by Google Chrome[1], Opera and Safari but will not be implemented by Mozilla(Firefox)[2] who instead propone Indexed Database API access.

不知道 HTML 5 的 SQLDB 会被浏览器支持的怎么样, 不过sessionStorage看上去已经可以基本满足需求了。

更多精彩内容其他人还在看

更受欢迎 更具创造性的深底色网页设计实例

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
收藏 0 赞 0 分享

有创意的关于我们网页页面设计

本文收集了一些“关于我们”网页页面,60个漂亮的有效果的对用户非常友好的关于我们页面的设计实例。希望你能从中获得设计灵感。
收藏 0 赞 0 分享

整洁漂亮的网页设计的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
收藏 0 赞 0 分享

设计参考 WordPress建站成功案例

最近国外有个牛人收集了 16 个专门收集 wordpress 精彩建站案例的网站,对于每一个 wordpress 迷来说,这都是一份大礼。
收藏 0 赞 0 分享

新闻风格网站设计实例25个

杂志和新闻风格设计越来越流行了。像Wordpress之类的内容管理系统对此类网站有比较多的模板选择,可以让普通的站长或博主轻松实现一个很像新闻网站的网站。在本文中,我们将推荐25个可以为你提供灵感的杂志风格网站设计。
收藏 0 赞 0 分享

网页文字设计应该像聪明女孩穿衣服

  这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美丽的一面的。界面设计何尝不是如此?那就让我们来看看聪明女人的穿衣之道里有没有什么做设计可以借鉴的地方
收藏 0 赞 0 分享

怎样设计网页?怎样制作网页?

  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。   其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”
收藏 0 赞 0 分享

网页可读性提高的几个方法

1. 使用对比色 (Use contrasting colours). 这里说的对比是文字的颜色和背景色的对比。这样用户可以比较容易的看清文字,减少阅读疲劳。有视力障碍的人可能看不清楚低对比度的文字。可以去Vischeck这个网站可以看看你的网站在色弱(或色盲)用户眼中的样子。
收藏 0 赞 0 分享

网页设计心得:页面布局的简单规则

·重复:在整个站点中重复实现某些页面设计风格。   重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。   颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 &middo
收藏 0 赞 0 分享

网页设计人员应该注意的43个Web设计错误

这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。 1. 用户必须
收藏 0 赞 0 分享
查看更多