Here are various ways you can use data through HTML5. The code is larger than usual, that's because I've provided code for 8 different methods of storing and using data. I have tried to highlight the related code and method using colours. To run this, you'll need 3 files:
- index.php
- twittieserver.php
- webworker.plugin.js
The code for all of these files is below. So, let's start with index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Localstorage</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:0.9em/1.1em Sans-serif;
color:#808080;
}
.column
{
float:left;
width:440px;
}
form, section
{
margin:10px;
padding:10px;
width:400px;
border:2px solid #808080;
}
p.description, section article ul
{
margin:4px 4px 8px 0px;
padding:4px;
}
section article ul
{
background:#F5DA55;
}
p.description
{
background:#F5F555;
}
h1, h2
{
font:1.4em/1.5em Georgia, Serif;
}
h1
{
margin:14px 0 10px 10px;
}
strong
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
</head>
<body>
<h1>HTML5 Data Options</h1>
<div class="column">
<form>
<h2>Input</h2>
<p class="description">This form will be used to add content to the sessionStorage, localStorage and Web SQL Objects.</p>
<input type="text" id="one" /><br />
<button>Save</button>
</form>
<section id="customdataattribute">
<h2>Custom Data attributes</h2>
<p class="description">Allows you to hold data values within a selector.<p>
<p class="description">E.g <li data-no="20"><br />Can therefore be called through jQuery as $('li').data('no');<p>
<article>
<ul>
<li data-no="22">This value is 22<li>
<li data-no="33">This value is 33<li>
</ul>
</article>
</section>
<section id="sessionstorage">
<h2>sessionStorage</h2>
<p class="description">This data will be lost when the browser is closed.<p>
<article></article>
</section>
<section id="localstorage">
<h2>localStorage</h2>
<p class="description">This data will be retained after the browser is closed. It persists until deleted by user through browser settings or by this application.<p>
<article></article>
</section>
</div>
<div class="column">
<section id="cachemanifest">
<h2>cache-manifest</h2>
<p class="description">A file which tells the browser what to cache, and not cache.
<br /><strong>CACHE MANIFEST</strong> entries will be cached after they are downloaded for the first time.
<br /><strong>NETWORK</strong> entries require a connection to the server, and will not be cached.
<br /><strong>FALLBACK</strong> are fallback pages, if a page is unavailable.
<br />Instructions below:</p>
<article>
<p>First create a .htaccess file for your site (if you are using a proper web server) and add to it the following line:</p>
<p>AddType text/cache-manifest .manifest</p>
<p>Next, create a file called cache.manifest. In this file, add the lines:</p>
<p><strong>CACHE MANIFEST</strong></p>
<p>index.html</p>
<p><strong>NETWORK</strong>:</p>
<p>login.html</p>
<p><strong>FALLBACK</strong>:</p>
<p>/html/ /offline.html</p>
</article>
</section>
<section id="sse">
<h2>Server-Sent Events</h2>
<p class="description">Allows this application to get data updates from a server. In this example I've simulated a twittie server using a PHP script called twittieserver.php. This data will be lost when the browser is closed.</p>
<article>
<ul>
</ul>
</article>
</section>
<section id="webworker">
<h2>Web Worker</h2>
<p class="description">A piece of JavaScript or jQuery running in the background, without affecting the performance of this application.</p>
<article></article>
</section>
<section id="websql">
<h2>Web SQL</h2>
<p class="description">Allows an application such as this to build a SQL database at the client end. It is also possible to synchronise this data at the server end. This supports applications which ahve both and online and offline state. It persists until deleted by user through browser settings or by this application.</p>
<article>
<ul>
</ul>
</article>
</section>
</div>
<script>
/* Calculates the custom data attributes and appends them to the result of a selector */
$.fn.calculatecustomattributes = function()
{
lis = $(this).children('li');
res = 0;
ve = 0;
$(lis).each(function()
{
ve = parseInt($(this).data('no'));
if(!isNaN(ve))
{
res += ve;
}
});
$(this).append('<li>Result is '+res+'</li>');
};
/* Sets the form contents which were stored in the sessionStorage object to the calling selector */
$.fn.displaysessionstorage = function()
{
$(this).html('<p>Content is '+sessionStorage.getItem('one')+'</p>');
};
/* Sets the form contents which were stored in the localStorage object to the calling selector */
$.fn.displaylocalstorage = function()
{
$(this).html('<p>Content is '+localStorage.one+'</p>');
};
/* Lists contents of the Web SQL object in the calling selector */
$.fn.displaywebsql = function(db)
{
container = $(this);
db.transaction(function(tx)
{
tx.executeSql('SELECT * FROM jimmy', [], function(tx, results)
{
var len = results.rows.length, i;
for (i = 0; i < len; i++)
{
$(container).append('<li>'+results.rows.item(i).text+'</li>');
}
});
});
};
/* This function is called when the 'Save' button is clicked */
$.fn.saveit = function(db)
{
/* Put the value of the form input in a variable */
one = $('form #one').val();
/* Create an item in the sessionStorage object and apply the value of our variable */
sessionStorage.setItem('one', one);
/* Create an item in the localStorage object and apply the value of our variable */
localStorage.one = one;
/* Insert the value of our variable into the Web SQL object */
db.transaction(function(tx)
{
tx.executeSql('INSERT INTO jimmy (text) VALUES (?)',[one]);
});
/* Refresh the contents of our containers */
$('#sessionstorage article').displaysessionstorage();
$('#localstorage article').displaylocalstorage();
$('#websql article ul').displaywebsql(db);
};
(function()
{
/* Check to see if web storage is supported */
if(typeof(Storage) == 'undefined')
{
alert('Sorry! No web storage support..');
};
/* Check to see if web workers are supported */
if(typeof(Worker) == 'undefined')
{
alert('Sorry! No web worker support..');
}
/* Check to see if Server-Sent Events are supported */
if(typeof(EventSource) =='undefined')
{
alert('Sorry! No server-sent events support..');
}
/* Calculate custom attibutes */
$('#customdataattribute article ul').calculatecustomattributes();
/* Create a Web SQL object */
var db = openDatabase('mydb', '1.0', 'jimmy database', 2 * 1024 * 1024);
db.transaction(function(tx)
{
tx.executeSql('CREATE TABLE jimmy (id unique, text)');
});
/* Refresh the contents of our containers */
$('#sessionstorage article').displaysessionstorage();
$('#localstorage article').displaylocalstorage();
$('#websql article ul').displaywebsql(db);
/* Call the saveit function when the button is clicked */
$('button').click(function()
{
$(document).saveit(db);
});
/* Get updates for a server, here I've simulated the server with a PHP script */
var feed = new EventSource('twittieserver.php');
feed.onmessage = function(event)
{
/* Add new articles to the top of the list and limit the list to 4, thus removing the fourth item from the list */
$('#sse article ul').prepend(event.data);
if($('#sse article ul > li').size() == 4)
{
$('#sse article ul li:last-child').remove();
}
};
/* Get updates from a JavaScript, simply replacing the contents of the container with each new value returned */
w = new Worker("webworker.plugin.js");
w.onmessage = function(event)
{
$('#webworker article').html(event.data);
};
})();
</script>
</body>
</html>
Now twittieserve.php
<?php
header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');
$seconds = date('s');
echo 'data:<li>Item '.$seconds.'</li>'.PHP_EOL.PHP_EOL;
flush();
?>
And finally, webworker.plugin.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Enjoy!
