HTML5 Web Storage示例

一、 DEMO HTML代码

上一次介绍了HTML5 Web Storage存储机制，原来必须保存在服务端数据库中的内容现在可以直接保存在客户端本地了，这不仅可以减轻了服务器数据访问的负担，同时也提高了数据的访问速度。请将下面的代码复制到html文件中，我们通过示例来了解Web Storage。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Web Storage示例</title>
<script type="text/javascript" src="JS/webstoragescript.js">
</script>
</head>
<body>
<div>
<h2>sessionStorage示例</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示例</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>

上为DEMO HTML代码

当我们点击保存数据时，分别调用webstoragescript.js（代码在文章后面）中的savesessionStorage和savelocalStorage方法，点击读取数据时分别调用loadsessionStorage和loadlocalStorage方法。

让我们打开JS脚本文件来看下，该脚本分别使用了sessionStorage和localStorage两种方法。这两种方法的HTML代码只有p id和input id不同 ，都是当用户在input文本输入内容并点击保存数据按钮时保存数据，点击读取数据时读取保存的数据。

但是他们对数据的处理方式都不一样，sessionStorage方法如果关闭了浏览器，这个保存的数据就丢失，在一次打开浏览器浏览这个页面的时候，点击读取数据将读取不到任何数据。

而localStorage则是浏览器被关闭，下次在打开浏览器浏览这个页面点击读取数据时任然能读取到保存的数据。当然，这个数据是区分浏览器的，在别的浏览器中是读取不到这个浏览器保存的数据的。

二、两种对象使用方法


1．sessionStorage
保存数据：sessionStorage.setItem(key,value);
读取数据：sessionStorage.getItem(key);


2．localStorage
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);

看上面的说明相信大家都能很快明白两种对象的使用方法。但是，不管是使用哪个对象，都是用setItem(键名,键值)的方法来保存数据，保存后不允许修改键名，但是可以修改键值也就是说只新建键名，再保存键值。使用getItem方法读取数据时，将参数指定为键名，返回键值。

// sessionStorage示例JS
function savesessionStorage(id){
var target= document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str);
}

function loadsessionStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");
target.innerHTML=msg;
}

// localStorage示例JS
function savelocalStorage(id){
var target= document.getElementById(id);
var str=target.value;
localStorage.setItem("message",str);
}

function loadlocalStorage(id){
var target=document.getElementById(id);
var msg=localStorage.getItem("message");
target.innerHTML=msg;
}

webstoragescript.js代码

web storage

火狐浏览器中的HTML5 Web Storage示例

posted @ 2012-04-12 19:57  张长胜  阅读(350)  评论(0)  编辑  收藏  举报