您的位置：首页 > Web前端 > HTML

HTML 5中的存储及离线应用（四）

2012-08-22 09:43 316 查看

好吧，目前看起来咱们还是老老实实用Local Storage和Session Storage吧，还是这两看起来靠谱一些。

那么我们在使用Local Storage的时候经常遇到如下的情况：

在一个页面中数据发生了改变，另一个页面不会实时去刷新数据导致两个页面的数据不同步；

这种情况下我们就需要用到存储事件。

接着我们将讲解事件的使用，看代码：

<?xml version="1.0" encoding="utf-8"?>
<!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>
<title>
localStorage example
</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<script language="javascript" src="../Javascript/bwH5LS.js"></script>
<script language="javascript">
var t = new bwTable();
var db = getLocalStorage() || dispError('Local Storage not supported.');
var addEL = getAddEventListener();

function getLocalStorage() {
try {
if( !! window.localStorage ) return window.localStorage;
} catch(e) {
return undefined;
}
}

// 确保可以使用window.addEventListener
function getAddEventListener() {
try {
if( !! window.addEventListener ) return window.addEventListener;
} catch(e) {
return undefined;
}
}

// 消息处理
function eventHandler(e) {
eventStatus('Event triggered: ' + e.url + ' ' +
e.storageArea.traveler + ' ' + e.storageArea.destination + ' ' + e.storageArea.transportation);
dispResults();
}

// 添加状态显示区域
function eventStatus(s) {
if(s) element('eventResult').innerHTML = s;
else element('eventResult').innerHTML = 'Event status:';
}

function dispResults() {
if(errorMessage) {
element('results').innerHTML = errorMessage;
return;
}

if(db) {
var t = new bwTable();
t.addRow( ['traveler', db.getItem('traveler')] );
t.addRow( ['destination', db.getItem('destination')] );
t.addRow( ['transportation', db.getItem('transportation')] );
element('results').innerHTML = t.getTableHTML();
}
element('travelForm').elements['traveler'].focus();
element('travelForm').elements['traveler'].select();
}

function dbGo() {
if(errorMessage) return;
var f = element('travelForm');
db.setItem('traveler', f.elements['traveler'].value);
db.setItem('destination', f.elements['destination'].value);
db.setItem('transportation', f.elements['transportation'].value);
eventStatus();
dispResults();
}

function dbClear() {
if(errorMessage) return;
db.clear();
dispResults();
}

function initDisp() {
if(addEL) {
// 添加数据存储消息处理函数
addEL('storage', eventHandler, false);
} else {
element('eventResult').innerHTML = 'This browser does not support event listeners';
}
dispResults();
}

window.onload = function() {
initDisp();
}
</script>
</head>

<body>

<div id="content">

<h1>
localStorage example
</h1>

<div id="form">
<form id="travelForm">
<table class="form">
<tr><td class="label"> Traveler </td><td> <input type="text" name="traveler" /> </td></tr>
<tr><td class="label"> Destination </td><td> <input type="text" name="destination" /> </td></tr>
<tr><td class="label"> Transportation </td><td> <input type="text" name="transportation" /> </td></tr>
<tr><td colspan="2" class="button">
<input id="formSubmit" type="button" value="Clear" onClick="javascript:dbClear()" />
<input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" />
</td></tr>
</table>
<input id="inputAction" type="hidden" name="action" value="add" />
<input id="inputKey" type="hidden" name="key" value="0" />
</form>
</div>

<p class="message" id="eventResult">Event status:</p>

<div id="results">

</div>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 存储 html function javascript input class

相关文章推荐

新的分享

章节导航