Monday, October 30, 2006

Firefox 2.0: Client-side session and persistent storage

Firefox 2.0 contains support for new client-side storage features. In the release notes it reads:

New support for storing structured data on the client side, to enable better handling of online transactions and improved performance when dealing with large amounts of data, such as documents and mailboxes. This is based on the WHATWG specification for client-side session and persistent storage.

WHATWG Web Applications 1.0 Working Draft describes this mechanism as being similar to HTTP session cookies. Incidentally, it is also worth noting that there are numerous other interesting sections of this specification that have not yet been implemented! When you look at the spec, it would be tempting to think that this new mechanism could just be a new way to manipulate cookies, however this is *not* what Firefox 2.0 is doing.

The code following this entry gives simple examples of how to set a variable and retrieve variables using these new cross webpage storage mechanisms; page1.html & page2.html use session storage, page1a.html & page2a.html use persistent storage.

After executing the persistent storage example I noticed that a file called webappsstore.sqlite was created in my Application Data directory for Mozilla Firefox. I think the extension for this file pretty much gives the game away, this is an SQLite file. There are a couple more SQLite files which can be found in this directory, these play a part in the new Firefox 2.0 phishing (urlclassifier2.sqlite) and search engine (search.sqlite) functionality.

Firing up an evaluation version of Visual SQLite and loading up webappsstore.sqlite you will see this file contains a table called mozwebappsstore with columns; domain, key, value, secure.

Having proven to myself that the Firefox 2.0 persistent storage is provided by SQLite, I would make an educated guess that the session storage is provided by a memory resident version of the database. Using this new storage mechanism is easier than using cookies but the key advantage over cookies is likely to be performance. Changing and reading cookies usually mean disk access. When using a memory resident database, there is no disk access. Accessing multiple values from persistent storage even though this will involve disk access is also likely to be faster because all the data is in one place. Visual SQLite did not indicate that webappsstore.sqlite contains any indexing and when dealing with large amounts of data adding indexing could further improve performance.

I have yet to see a full disclosure of the details for the storage mechanism. I do not know what the implications of embedding SQLite into Firefox 2.0 are likely to be. However, it would not be a major stretch of the imagination to expect JavaScript to gain a complete SQL access mechanism for client-side stored data (need I mention the AJAX/LAJAX again). SQLite supports SQL and as of now SQLite is already pre-embedded in my favourite browser.

page1.html (session storage)


<html>
<head>
<script type="text/javascript">
//<![CDATA[
sessionStorage.setItem("test", 123);
//]]>
</script>
<title></title>
</head>
<body>
<a href="page2.html">Page 2</a>
</body>
</html>

page2.html (session storage)


<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
document.getElementById("result").innerHTML = "<b>" + sessionStorage.getItem("test") + "<\/b>";
};
//]]>
</script>
<title></title>
</head>
<body>
<div id="result"></div><a href="page1.html">Page 1</a>
</body>
</html>

page1a.html (persistent storage)


<html>
<head>
<script type="text/javascript">
//<![CDATA[
var storage = globalStorage['cse-mjmcl.cse.bris.ac.uk'];
storage.setItem("test", 123);
//]]>
</script>
<title></title>
</head>
<body>
<a href="page2a.html">Page 2a</a>
</body>
</html>

page2a.html (persistent storage)


<html>
<head>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var storage = globalStorage['cse-mjmcl.cse.bris.ac.uk'];
document.getElementById("result").innerHTML = "<b>" + storage.getItem("test") + "<\/b>";
};
//]]>
</script>
<title></title>
</head>
<body>
<div id="result"></div><a href="page1a.html">Page 1a</a>
</body>
</html>

2 comments:

ismjml said...

I just found SQLite Database Browser on Sourceforge, a free SQLite GUI.
Note: Comment imported. Original by markmc website: http://content.mark-mclaren.info/ at 2006-10-30 19:46

ismjml said...

Don't make the text so gray (low-contrast) and hard to read.
Note: Comment imported. Original by Anonymous at 2009-07-15 20:18