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

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

2012-08-22 09:31 274 查看

最后我们来看一下Indexed DB。

Indexed DB使用Key-Value的数据库存储；
被Firefox4/Chrome 11以上支持；
限制较多；

好吧，由于不支持“file://”URL我放弃了，目前看起来还是一个toy而已，真的不是很好用，代码简单看一下。。。

<?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>
indexedDB storage example
</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<script language="javascript" src="../Javascript/bwH5LS.js"></script>
<script language="javascript">
var db;
var dbVersion = '1.0';
openDB();

// Check if this browser supports indexedDB
function getIndexedDB() {
try {
if( ! window.indexedDB ) window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
if( !! window.indexedDB ) return window.indexedDB;
else return undefined;
} catch(e) {
return undefined;
}
}

// global error handler for indexedDB
function dbErrorHandler(event) {
dispError( 'Database error: ' + event.target.errorCode );
}

function openDB () {
var iDB = getIndexedDB();
if(!iDB) {
dispError('IndexedDB not supported.');
return;
} else {
try {
var request = iDB.open('travelDB', 'demo travel database');
request.onerror = function(event) { errorDisplay('Failed to open IndexedDB database.'); }
request.onsuccess = function(event) {
db = request.result; // set the global db variable
db.onerror = dbErrorHandler;
if(db.version != dbVersion) {
var vReq = db.setVersion(dbVersion);
vReq.onerror = function(event) { alert('version error: ' + event.target.errorCode); }
vReq.onsuccess = function(event) {
alert('Creating the object store');
var objectStore = db.createObjectStore('oTravel', { keyPath: 'id', autoIncrement: true });
objectStore.createIndex('traveler', 'ciTraveler', { unique: false });
}
}
}
} catch(e) {
dispError( 'Browser supports IndexedDB but didn\'t open the database. (' + e.message + ')');
}
}
}

// Create the Edit and Delete buttons for a row
function rowButtons( id, traveler ) {
return '<form><input type="button" value="Edit" onClick="javascript:editGo(' + id + ')"/>' +
'<input type="button" value="Delete" onClick="javascript:deleteGo(' + id + ', "' + traveler + '")"/></form>';
}

// sometimes the database takes a moment to open
// provides a retry for the dispResults() function
var retryCount = 0;
function retryDisp() {
if( ++retryCount > 5 ) {
errorDisp('Cannot open the database after 5 retries');
dispResults();
}
setTimeout('dispResults()', 100);
}

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

if(db) {
var bwt = new bwTable();
bwt.setHeader(['Traveler', 'Destination', 'Transportation', '']);
var count = 0;
var objectStore = db.transaction(['oTravel']).objectStore('oTravel');
var indexTraveler = objectStore.index("traveler");
indexTraveler.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
var v = cursor.value;
bwt.addRow([v.traveler, v.destination, v.transportation, rowButtons(v.id, v.traveler)]);
count++;
cursor.continue();
} else { // the cursor is done
element('rowCount').innerHTML = count;
element('results').innerHTML = bwt.getTableHTML();
element('travelForm').elements['traveler'].focus();
}
}
} else {
// There's been no error, so the databaes is probably still opening
retryDisp();
}
}

// add or update rows in the table
function dbGo() {
if(errorMessage) return;
var f = element('travelForm');
var action = f.elements['inputAction'].value;
var traveler = f.elements['traveler'].value;
var destination = f.elements['destination'].value;
var transportation = f.elements['transportation'].value;
var key = f.elements['key'].value;

switch(action) {
case 'add':
if(! (traveler || destination || transportation)) break;
curRec = { traveler: traveler, destination: destination, transportation: transportation,
ciTraveler: traveler.toLowerCase() };
db.transaction(['oTravel'], IDBTransaction.READ_WRITE).objectStore('oTravel').add(curRec);
break;
case 'update':
if(! (traveler || destination || transportation)) break;
curRec = { traveler: traveler, destination: destination, transportation: transportation,
ciTraveler: traveler.toLowerCase() };
var objectStore = db.transaction("oTravel", IDBTransaction.READ_WRITE).objectStore("oTravel");
objectStore.delete(key).onsuccess = function(event) {
objectStore.add(curRec);
};
break;
}
resetTravelForm();
dispResults();
}

// update the edited row
function editGo(id) {
db.transaction("oTravel").objectStore("oTravel").get(id).onsuccess = function(event) {
rec = event.target.result;
if(rec) {
var f = element('travelForm');
f.elements['traveler'].value = rec.traveler;
f.elements['destination'].value = rec.destination;
f.elements['transportation'].value = rec.transportation;
f.elements['goButton'].value = 'Update';
f.elements['inputAction'].value = 'update';
f.elements['key'].value = rec.id;
f.elements['traveler'].focus();
f.elements['traveler'].select();
}
}
}

// confirm and delete a row
function deleteGo(id, traveler) {
if(confirm('Delete ' + traveler + ' (ID: ' + id + ')?')) {
db.transaction("oTravel", IDBTransaction.READ_WRITE).objectStore("oTravel").delete(id);
resetTravelForm();
dispResults();
}
}

// clear all the form fields and reset the button and action elements
function resetTravelForm() {
var f = element('travelForm');
for( var n in [ 'traveler', 'destination', 'transportation', 'key' ] ) {
f.elements
.value = '';
}
f.elements['inputAction'].value = 'add';
f.elements['goButton'].value = 'Add';
}

// delete all the recs in the store
function clearDB() {
if(confirm('Clear the entire table?')) {
db.transaction("oTravel", IDBTransaction.READ_WRITE).objectStore("oTravel").clear();
resetTravelForm();
dispResults();
}
}

function initDisp() {
dispResults();
}

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

<body>

<div id="content">

<h1>
indexedDB storage 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" name="goButton" value="Add" 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 id="rcp" class="message">
There are <span id="rowCount">_</span> rows in the table.
<input type="button" value="Empty" onClick="javascript:clearDB()" />
</p>

<div id="results">

</div>

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

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

标签： html 存储 function javascript button input

相关文章推荐

新的分享

章节导航