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. function isIE() {
  2. return !!document.all;
  3. }
  4. function initUserData() {
  5. if (isIE()) document.documentElement.addBehavior("#default#userdata");
  6. }
  7. function saveUserData(key, value) {
  8. var ex;
  9. if (isIE()) {
  10. //IE
  11. with (document.documentElement) try {
  12. load(key);
  13. setAttribute("value", value);
  14. save(key);
  15. return getAttribute("value");
  16. } catch (ex) {
  17. alert(ex.message)
  18. }
  19. } else if (window.sessionStorage) {
  20. //FF 2.0+
  21. try {
  22. sessionStorage.setItem(key, value)
  23. } catch (ex) {
  24. alert(ex);
  25. }
  26. } else {
  27. alert("Error occured in user data saving. your browser do not support user data.");
  28. }
  29. }
  30. function loadUserData(key) {
  31. var ex;
  32. if (isIE()) {
  33. //IE
  34. with (document.documentElement) try {
  35. load(key);
  36. return getAttribute("value");
  37. } catch (ex) {
  38. alert(ex.message); return null;
  39. }
  40. } else if (window.sessionStorage) {
  41. //FF 2.0+
  42. try {
  43. return sessionStorage.getItem(key)
  44. } catch (ex) {
  45. alert(ex)
  46. }
  47. } else {
  48. alert("Error occured in user data loading. your browser do not support user data.")
  49. }
  50. }
  51. function deleteUserData(key) {
  52. var ex;
  53. if (isIE()) {
  54. //IE
  55. with (document.documentElement) try {
  56. load(key);
  57. expires = new Date(315532799000).toUTCString();
  58. save(key);
  59. }
  60. catch (ex) {
  61. alert(ex.message);
  62. }
  63. } else if (window.sessionStorage) {
  64. //FF 2.0+
  65. try {
  66. sessionStorage.removeItem(key)
  67. } catch (ex) {
  68. alert(ex)
  69. }
  70. } else {
  71. alert("Error occured in user data deleting. your browser do not support user data.")
  72. }
  73. }

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

本文实例代码

原文来自:http://www.cnblogs.com/powertoolsteam/archive/2010/08/05/1793240.html

转载于:https://www.cnblogs.com/I-am-fine/archive/2011/09/14/2175464.html

WEB数据储存的几种方式相关推荐

  1. linux数据同步技术比较,linux下实现web数据同步的四种方式(性能比较)教程.docx

    linux下实现web数据同步的四种方式(性能比较)教程 实现web数据同步的四种方式=======================================1.nfs实现web数据共享2.rs ...

  2. linux下实现web数据同步的四种方式(性能比较)

    实现web数据同步的四种方式 ======================================= 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 3.rs ...

  3. 实现web数据同步的四种方式

    实现web数据同步的四种方式 ======================================= 1.nfs实现web数据共享 2.rsync +inotify实现web数据同步 3.rs ...

  4. （转）基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式...

    http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...

  5. WEB通信交互的几种方式

    WEB通信交互的几种方式 - 实时通信发展过程简介 简单介绍一下现在的WEB通信有以下几种方式:最基本的http请求方式,Ajax轮询,Ajax长轮询,HTML5推送事件,HTML5的WebSocke ...

  6. docker容器运行mysql持久化_docker容器实现数据持久化的两种方式及其区别

    前言 这篇博文是我对docker实现数据持久化几种方式的特征进行一个总结. 在docker中,它的存储文件系统是在dockerhost上原有的xfs或ext4架设了一层文件系统:overlay2(将此 ...

  7. Hive数据导出的几种方式

    Hive数据导出的几种方式 参考资料地址:http://blog.csdn.net/qianshangding0708/article/details/50394789 感谢分享 (1)导出到本地文件 ...

  8. web服务器攻击的八种方式

    随着互联网的高速发展,网络走进了千家万户,同时也有很大一部分人架设起了自己的网站.继而不安分的黑客们,又将目光对准了服务器攻击这个方式,从而破坏或取得服务器的管理权限.本文将主要讲述针对web服务器攻 ...

  9. 数据迁移的几种方式 - MySQL数据库

    写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...

最新文章

  1. Affinity Propagation+聚类
  2. JavaScript中的数组遍历forEach()与map()方法以及兼容写法
  3. 美团的android多渠道包的3种方法
  4. 关于虚函数的应用（10个例子）
  5. linux命令上常用命令
  6. 使用MySQL的LAST_INSERT_ID--转
  7. MySQL InnoDB 锁介绍及不同 SQL 语句分别加什么样的锁
  8. python整形浮点型运算规则
  9. 重磅 | 第八届世界华人数学家大会将在清华大学举行
  10. 图---邻接矩阵 建立，深度遍历，广度遍历
  11. 第一：Pytest简介和环境准备
  12. dqn在训练过程中loss越来越大_深度强化学习——从DQN到DDPG
  13. Python选修课第二届Turtle绘图大赛
  14. halcon三种模板匹配方法
  15. python django mysql_Python之模块、函数和缩进
  16. vue基础之样式绑定（class，style）
  17. 干货，AES破解路程-生意参谋举例
  18. 《电路分析基础》第11章 耦合电感电路 读书笔记
  19. 计算机无法正常更新,电脑时间不能自动更新怎么回事?电脑时间校准同步方法介绍...
  20. 使用Nginx负载均衡及动静分离

热门文章

  1. 为什么程序员都反感笔试？
  2. 自己动手做后端（一） MySQL数据库搭建
  3. SpringBoot之整合Swagger(页面无法显示)
  4. Gatling:HTTP Protocol
  5. Xilinx_Vivado_SDK安装过程中可能遇到的问题和解决方法
  6. 【Github下载慢】----解决方案（亲测有效）
  7. Redis 阿里云安装redis
  8. c语言取消注释,实现去除c语言注释的小工具
  9. (c语言)交替换行输出大写字母和小写字母
  10. Java 静态工厂方法详解