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.

All major browsers except Safari currently support IndexedDB. Because Safari supports Web SQL, however, it's possible to use an IndexedDB polyfill (called a shim) that implements the features and syntax of IndexedDB using Web SQL.

The first step in using IndexedDB is to open a database.

var request = indexedDB.open("myDatabase");

After you've created the database, you can create an object store (which is something very much like a table) and add data to it. Assume we have the following data:

const petData = [

{ id: "00-01", firstname: "Butters", age: 2, type: "dog" },

{ id: "00-02", firstname: "Sammy", age: 2, type: "dog" }

];

We can then create a data store and use it with the following code. Note the onupgradeneeded handler: This is the method to call when you need to change the structure of your database.

request.onupgradeneeded = function(event) {

var db = event.target.result;

var objectStore = db.createObjectStore("customers", {keyPath: "id"});

for (var i in customerData) {

objectStore.add(customerData[i]);

}

}

How-to: Improve Application Performance and Reduce Latency
IndexedDB excels at searching large data sets and can speed up Web app performance by moving structured data to the client side wherever possible. It's approaching W3C Recommendation status and is usable in every browser — albeit with some differences between implementations and, as noted, only through a polyfill in Safari.

Application Cache: Making Offline Client-Side Storage Happen

The Application Cache isn't like other client-side data storage APIs listed here, but it's worth mentioning, as it's an important component in enabling offline client-side Web apps.

The Application Cache uses a cache manifest. This is a simple text document listing resources that should and shouldn't be cached, to tell the browser to download certain files, hold onto them and use the cached version rather than make a request to the server. Every major Web browser supports the Application Cache.

To use the Application Cache, save a text file with the extension .appcache in the root of the website containing the files you want to cache. Depending on the Web server you're using, you may need to create a custom MIME type for .appcache files to make sure they're served to the browser correctly and can be read as application cache files.

Here's an example of a cache manifest file:

CACHE MANIFEST

CACHE:

/css/styles.css

/js/javascript.css

/img/logo.gif

FALLBACK:

/img/weathertoday.png /img/weathernotavailable.png

NETWORK:

*

And here's what each part does:

The CACHE section tells the browser which resources to cache for viewing offline. These files will be cached until the cache manifest changes. Remember that requirement; it's important.

The FALLBACK section tells the browser what files to display instead of a non-cached resource. For example, in the FALLBACK section above, a graphic that presumably says that the latest weather isn't available in offline mode will display if the latestweather.png graphic can't be downloaded.

 

Previous Page  1  2  3  4  5  Next Page 

Sign up for CIO Asia eNewsletters.