客户端数据存储–超越cookies
说到客户端数据存储，可能第一时间想到的是cookies，这是一种网站常见的存储数据的方法。它的最大优点是兼容性好，几乎所有浏览器都具有这个功能，缺点是存储量太小（4k）、数据访问不够灵活。随着Ajax的兴起和离线应用需求的增加，对本地数据存储的需求已经不是cookies可以满足的了。
当前浏览器的数据存储方式
除了通用的cookies,在internet explorer下，可以使用UserData来存储；类似的，在firefox下，可以通过sessionStorage来存储；safari可以通过Database Storage来存储；opera可以通过widgets来实现。可见，目前实现本地数据存储的标准并未统一。
当然，还有一种方式，就是Flash local Shared Object。这个不失为当前的一种解决方案。
这里是一份兼容firefox2+和ie5+的本地存储数据的示例代码：
JavaScript:
-
<!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>无标题文档</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
这几位就不用多说了吧？网上早已沸沸扬扬了，实现本地数据存储那是小儿科。不过，它们已经超出浏览器的范围，而且本地数据存储也不是它们最大的卖点，所以就不废唇舌了。
总之，随着标准的成熟和浏览器的发展，对本地数据存储的支持会越来越好。相信未来互联网会涌现很多精彩应用，让我们拭目以待吧！
推荐阅读
Firefox 2: Client-side storage and a lot more
WebKit Does HTML5 Client-side Database Storage
Boost Ajax performance using local storage
Bringing Web-based applications offline
有看头!竟然还有userData这个东西,孤陋寡闻了!