Monday, April 30, 2012

Chrome browser client-side data storage

Web Storage: client-side data storage

The localStorage attribute is an object provided by the specification under Candidate Recommendation review.  This specification defines an API for persistant data storage of key-value pair data in Web clients.  Web Storage offers two different storage areas, local storage and session storage which differ in scope and lifetime. Data placed in local storage is per domain for each client and persists after the browser is closed.

Here is a simple demo html file for local storage...
<!DOCTYPE html>
<!-- LocalStorageDemo.html -->
<title>Web Storage Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

<script type="text/javascript">
window.onload  = function(){

function loadvalues(){

function savethestuffLocal(){
 var object = document.getElementById("localinput");
 var thevalue = object.value;
 localStorage.setItem(1, thevalue);
function getthestuffLocal(){
 var data;
 var thediv = document.getElementById("displaylocal");
 data = localStorage.getItem(1);
 if (data){
  thediv.innerHTML = "The value is "+data;

<h1>Web Storage Example</h1>
<h2>Local Storage</h2>
<div id="displaylocal">Seems there is nothing stored in local storage yet</div>
<input type="text" name="" value="" id="localinput" />
<a href="javascript:savethestuffLocal();">Save it!</a>
<p id="local_storage_infio">This data is stored using Local Storage. Which means that even if you close the page, and re-open it, the data you saved should be loaded again.</p>

Here, we look at a simple demo (from the code above) for local storage...

Web Storage Example

Local Storage

Seems there is nothing stored in local storage yet
Save it!
This data is stored using Local Storage. Which means that even if you close the page, and re-open it, the data you saved should be loaded again.

When you type something in the input box above and click "Save It!" the data is stored on your local system in your browsers Local Storage area for the domain and the local path (in my case)...

/Users/drew/Library/Application Support/Google/Chrome/Default/Local/Storage/http_blog.poling.org_0.localstorage

This file is in the SQLite format 3 binary format for Chrome and contains the key 1 and value of the data entered...

$ cat  Local\ Storage/http_blog.poling.org_0.localstorage 
?????z!11?tableItemTableItemTableCREATE TABLE ItemTable (key TEXT UNIQUE ON CONFLICT REPLACE, value BLOB NOT NULL ON CONFLICT FAI1test1indexsqlite_autoindex_ItemTable_1ItemTable

You can also see the data from Chromes Developer tools, open VIEW --> Developer > Developer Tools
then click on Resources, under Local Storage click on to see the value...

For more info you can take a look at Shwetank Dixit's post on Web Storage.

Next time I will take a look at HTML5 Filesystem.