客户端数据存储–超越cookies

作者：canque 来源：canque的blog 时间：2008-01-15 13:01:00　

说到客户端数据存储，可能第一时间想到的是cookies，这是一种网站常见的存储数据的方法。它的最大优点是兼容性好，几乎所有浏览器都具有这个功能，缺点是存储量太小（4k）、数据访问不够灵活。随着Ajax的兴起和离线应用需求的增加，对本地数据存储的需求已经不是cookies可以满足的了。

当前浏览器的数据存储方式

除了通用的cookies,在internet explorer下，可以使用UserData来存储；类似的，在firefox下，可以通过sessionStorage来存储；safari可以通过Database Storage来存储；opera可以通过widgets来实现。可见，目前实现本地数据存储的标准并未统一。
当然，还有一种方式，就是Flash local Shared Object。这个不失为当前的一种解决方案。

这里是一份兼容firefox2+和ie5+的本地存储数据的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>超越cookies - asp之家</title></head> <body> <script language="javascript">var isIE = !!document.all;if(isIE)document.documentElement.addBehavior("#default#userdata");function saveUserData(key, value){ var ex; if(isIE){ with(document.documentElement)try { load(key); setAttribute("value", value); save(key); return getAttribute("value"); }catch (ex){ alert(ex.message) } }else if(window.sessionStorage){//for firefox 2.0+ try{ sessionStorage.setItem(key,value) }catch (ex){ alert(ex); } }else{ alert("当前浏览器不支持userdata或者sessionStorage特性") }} function loadUserData(key){ var ex; if(isIE){ with(document.documentElement)try{ load(key); return getAttribute("value"); }catch (ex){ alert(ex.message);return null; } }else if(window.sessionStorage){//for firefox 2.0+ try{ return sessionStorage.getItem(key) }catch (ex){ alert(ex) } }else{ alert("当前浏览器不支持userdata或者sessionStorage特性") }}function deleteUserData(key){ var ex; if(isIE){ with(document.documentElement)try{ load(key); expires = new Date(315532799000).toUTCString(); save(key); } catch (ex){ alert(ex.message); } }else if(window.sessionStorage){//for firefox 2.0+ try{ sessionStorage.removeItem(key) }catch (ex){ alert(ex) } }else{ alert("当前浏览器不支持userdata或者sessionStorage特性") }} saveUserData("emu","hello world !")alert(loadUserData("emu"))deleteUserData("emu")alert(loadUserData("emu"))</script>这是实验代码而非产品代码，仅供演示使用。</body></html>

未来客户端数据存储

HTML5中的数据存储
WHATWG在HTML5的草案中建立了两种数据存储方式：
Client-side session and persistent storage of name/value pairs
Client-side database storage
尤其值得期待的是Client-side database storage这种存储方式，利用sql来访问本地数据。
之所以说是未来客户端数据存储，是因为当前还是一个草案，而且浏览器支持还很成问题（firefox已经支持sessionStorage,webkit(safari)已经支持databaseStorage），但是仍然可以看出一种趋势。
AIR、sliverLight和Google Gears
这几位就不用多说了吧？网上早已沸沸扬扬了，实现本地数据存储那是小儿科。不过，它们已经超出浏览器的范围，而且本地数据存储也不是它们最大的卖点，所以就不废唇舌了。

总之，随着标准的成熟和浏览器的发展，对本地数据存储的支持会越来越好。相信未来互联网会涌现很多精彩应用，让我们拭目以待吧！

标签：cookies,客户端,浏览器,ajax

投稿

客户端数据存储–超越cookies

猜你喜欢

git如何合并某个分支的某次提交(cherry-pick)

云服务器centos8安装oracle19c的详细教程

Python操作MySQL数据库9个实用实例

Iinternet Explorer浏览器简介（IE）

用Python采集《雪中悍刀行》弹幕做成词云实例

MySQL处理重复数据的学习笔记

matplotlib基础绘图命令之errorbar的使用

Yahoo!网站性能最佳体验的34条黄金守则—内容

python3通过qq邮箱发送邮件以及附件

SQL Server 2016 TempDb里的显著提升

Python装饰器的两种使用心得

CSS框架的相关汇总（CSS Frameworks）

python使用matplotlib画饼状图

学以致用驳“ASP低能论”

手把手教你利用opencv实现人脸识别功能（附源码+文档）

通过yum方式安装mySql数据库的全过程

原生python实现knn分类算法

对python requests的content和text方法的区别详解

如何提升JavaScript的运行速度（递归篇）

php文件上传类完整实例

客户端数据存储–超越cookies

猜你喜欢

git如何合并某个分支的某次提交(cherry-pick)

云服务器centos8安装oracle19c的详细教程

Python操作MySQL数据库9个实用实例

Iinternet Explorer浏览器简介（IE）

用Python采集《雪中悍刀行》弹幕做成词云实例

MySQL处理重复数据的学习笔记

matplotlib基础绘图命令之errorbar的使用

Yahoo!网站性能最佳体验的34条黄金守则—内容

python3通过qq邮箱发送邮件以及附件

SQL Server 2016 TempDb里的显著提升

Python装饰器的两种使用心得

CSS框架的相关汇总（CSS Frameworks）

python使用matplotlib画饼状图

学以致用 驳“ASP低能论”

手把手教你利用opencv实现人脸识别功能（附源码+文档）

通过yum方式安装mySql数据库的全过程

原生python实现knn分类算法

对python requests的content和text方法的区别详解

如何提升JavaScript的运行速度（递归篇）

php文件上传类完整实例

学以致用驳“ASP低能论”