HTML5 Web Storage使用实例

很久没写文章了,忙加懒实在没办法,之前也看过关于Web Storage的文章,当时就觉得各各浏览器的支持跟上来还早着呢,像我们这样做门户网站的一时半会儿也用不上,毕竟用户群体鱼目混杂嘛,最近各各浏览器频频升级,尤其IE转眼间从ie6、ie7跑到ie11了。

Web Storage呢就跟session和cookie一样的啦,不过session和cookie大家都知道,今天要说说Web Storage。

Web Storage也有分两类sessionStorage和localStorage,这两个差别就跟session和cookie一样,sessionStorage关闭浏览器后过期,localStrage不会过期,但是跟cookie不一样的是没有过期时间。

对比session和cookie的优点主要提现在一下三点:

1、容量大,IE8里是10M,不同浏览器支持大小不一致。

2、不会随着回话来传输。

3、读取和写入方便,有现成的sessionStorage.setItem(key,value),sessionStorage.getItem(key),localStorage.setItem(key,value),localStorage.getItem(key)方法。

Web Storage在各各浏览器中的支持情况:

 

Web Storage使用实例代码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Web Storage Demo</title>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
function savesessionStorage(id){sessionStorage.setItem(message,$(id).value);}
function loadsessionStorage(id){$(id).innerHTML=sessionStorage.getItem("message");}
function savelocalStorage(id){localStorage.setItem("message",$(id).value);}
function loadlocalStorage(id){$(id).innerHTML=localStorage.getItem("message");}
</script>
</head>
<body>
<div>
<h2>sessionStorage Demo</h2>
<p id="sessionMsg"></p>
<input type="text" id="sessionInput" />
<input type="button" value="保存数据" onclick="savesessionStorage(‘sessionInput‘);" />
<input type="button" value="读取数据" onclick="loadsessionStorage(‘sessionMsg‘);" />
<br />
<h2>localStorage Demo</h2>
<p id="localMsg"></p>
<input type="text" id="localInput" />
<input type="button" value="保存数据" onclick="savelocalStorage(‘localInput‘);" />
<input type="button" value="读取数据" onclick="loadlocalStorage(‘localMsg‘);" />
</div>
</body>
</html>
View Code

Web Storage使用实例代码运行效果:

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。