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的测试代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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有很多地方是不同的。

下面是一个测试页面：

其中的 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看上去已经可以基本满足需求了。

 本文实例代码

本文是由葡萄城控件技术开发团队发布，转载请注明出处：葡萄城控件

了解更多开发工具和技巧，请前往葡萄城控件官网

了解企业级报表和Web应用，请前往葡萄城企业软件网站

浅析Web数据存储-Cookie、UserData、SessionStorage、WebSqlDatabase的更多相关文章

  1. 数据存储-cookie、sessionstorage、localstorage

    HTML5 Web Storage sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据.有了本地 ...

  2. 客户端数据存储cookie、localStoeage、sessionStorage（小记）

    一.数据存储分为客户端存储和服务端存储 1.而对于客户端存储,在html5以前只能通过cookie来实现:html 5以后增加了web存储(实际保存本地)的功能   (1)对于web存储有两个标准: ...

  3. 本地存储cookie,localStorage,sessionStorage

    常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...

  4. H5新特性 本地存储---cookie localStorage sessionStorage

    本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...

  5. Web 数据存储总结

    随着Web应用程序的出现,也产生了对于能够在客户端上存储用户信息能力的要求.这个问题的第一个解决方案是以cookie形似出现的.网景公司在一份名为“Persistent Client State: H ...

  6. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  7. web数据存储

    数据的存储必然是任何网站必须经历的事,我们可以将数据存放在不同地方,数据库.文件.内存.程序本身.cookie,session中都可以,但是只要需要持久化保留的数据,那么最终肯定还是落在磁盘之上的,我 ...

  8. 【前端学习笔记05】JavaScript数据存储Cookie相关方法封装

    //Cookie设置 //设置新cookie function setCookie(name,value,duration){ var date = new Date(); date.setTime( ...

  9. HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

随机推荐

  1. css清除浮动clearfix:after的用法详解

    如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法:  CSS代码: 复制代码 代码如下: .clearfix:after ...

  2. VBA_把相同行一列追加数据到一行

    Sub Test() Dim rowsNum, i, j, equalRowsNum As Integer rowsNum = ActiveSheet.UsedRange.Rows.Count '获得 ...

  3. 关于UC浏览器兼容scroll事件问题

    经过本人查阅无数资料,最终得出一个比较简单,具有一定兼容性的结果. $(window).scroll(function( ) { var scrollTop = document.documentEl ...

  4. PSO算法的改进（参数）

    ## 基本PSO的改进 虽然粒子群在求解优化函数时,表现了较好的寻优能力:通过迭代寻优计算,能够迅速找到近似解:但基本的PSO容易陷入局部最优,导致结果误差较大. 两个方面:1.将各种先进理论引入到P ...

  5. 琴声不等式--jensen

    (来自百度百科) 1. 凹函数,不加权 2. 凹函数,加权 3. 凸函数,不加权 4. 凸函数,加权 应用 在EM算法Q函数的推导中,用到了第二个不等式(凹函数,加权)

  6. 无法连接 Plugins Market 失效的日子

    一.问题背景 不知道是什么原因,我的 Intellij 连接不上 Plugins Market,这时候我需要使用 @Data 注解来自动生成 Getter.Setter 方法.在添加了相应的依赖之后, ...

  7. chown命令详情

    基础命令学习目录首页 原文链接:https://www.jb51.net/article/98255.htm chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名 ...

  8. Python入门学习系列——Python文件和异常

    从文件中读取数据 首先准备一个文本文件,文件中存储着普通文本数据.读取文件需要调用open()和read()函数. 读取整个文件 代码示例: with open('pi_digits.txt') as ...

  9. 定时任务crone表达式demo

    1. cron表达式格式: {秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)} 2. cron表达式各占位符解释: {秒数} ==> 允许值范围: 0~59 ,不允许 ...

  10. Dailu Scrum (2015/10/27)

    在周日晚上PM已经为大家分配了部分的代码修改工作,今天晚上PM召集了被分配代码工作的3个DEV一起讨论要求修改的代码.在共同讨论的过程中确有发现以下代码的不规范之处,PM当即要求我们先要修改规范代码的 ...