位置：首页>> 网络编程>> JavaScript>> 客户端数据存储–超越cookies

客户端数据存储–超越cookies

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

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

说到客户端数据存储，可能第一时间想到的是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

猜你喜欢