Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

4 client-side web storage options that replace cookies

Chris Minnick and Ed Tittel | Sept. 4, 2013
Several standards exist for storing large amounts of data in a user's Web browser. Each has its benefits, tradeoffs, W3C standardization status and level of browser support. All are better than cookies.

With so many negatives attached to using cookies for local storage, it's no wonder that various competing proposals have emerged to get this job done right. In recent months, two such proposals have been on a fast track to W3C recommendation status — which makes browser support for local storage good and about to get better.

There are four main methods for storing large amounts of client-side data today: Web SQL, IndexedDB, Web Storage and Application Cache. The sections that follow examine each method individually and explore basic aspects of their programming and operation.

Web SQL: Familiar (But Obsolete?) Database Creation, Execution

Web SQL is an API for storing data in a database and retrieving it using SQL. Until recently, Safari, Chrome, and Opera supported Web SQL over the competing IndexedDB standard. However, in 2010, SQLite was the only database that worked with Web SQL, and the W3C ceased working on this specification, citing a lack of implementations as its reason.

That said, Web SQL works in a cool way, so let's look at some sample code.

Working with Web SQL databases will be familiar to anyone who's worked with relational databases and SQL. The first step in using a database is to create it and open it. If you don't want to specifically create a database, you can just start using a database, and the API creates it for you.

Here's some code for creating a database:

var db = openDatabase('cats', '1.0',

'a catalog of my cats', 2 *1024 * 1024);

Left to right, the parameters taken by openDatabase are database name, version number, text description, and estimated database size.

Once you've created a database, you can start using it. Executing SQL on a WebSQL database is as easy as creating a transaction object and then executing it:

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE cats (id unique, name)');

tx.executeSql('INSERT INTO cats (id,name) VALUES (1,"Mr. Jones")');


Although Safari, Chrome, Opera and Mobile Safari still support this API, nothing new has happened with Web SQL since 2010, so it's unlikely to emerge as a standard for local storage.

Web Storage: Benefits of Cookies Without the Bloat
Web Storage provides a simple means to store key/value pairs in a user's browser. But its similarities with cookies end there.

Web Storage is persistent. Once a value is stored, it doesn't disappear or expire until it's explicitly removed by the application or the user.

Web Storage can handle large amounts of data. Current browsers limit total size per storage area to 5MB.

Web Storage doesn't depend on the server and sends no data to the server. You're free to store data locally and sync it with the server asynchronously, of course, but Web Storage works equally well and is just as useful offline as it is online.


Previous Page  1  2  3  4  5  Next Page 

Sign up for CIO Asia eNewsletters.