Using HTML 5 Local Storage in Chrome Extensions

BANGALORE, INDIA: This article outlines how chrome extensions can leverage HTML 5 local storage feature to persist data across popup and browser sessions. It uses a sample extension which is already available in the Extension Gallery. This article is limited to structured storage and retrieval from local storage. SQL support and web storage is out of scope for this article.

Prerequisites

Before you read this article, you should already be familiar with:

    * Chrome Extensions
    * HTML 5 Local storage and the associated APIs window.localStorage
    * Javascript

Setting up and running the Sample Extension

   1. Install the extension from the extension gallery

      Extension is available at the following URL : https://chrome.google.com/extensions/detail/hmbpgbeiphknbkjjfppodijapijlpkkc

   2. Click on the Extension Browser Action
   3. Extension will show last three names entered in the popup
   4. Enter a new name and see the names change
   5. Close the popup or the browser, the Names are still retrieved beyond the lifecycle of the session or the browser instance

The objective of this sample is to:

Show usage of HTML 5 Local Storage APIs within the extension

Figure 1: Sample popup screen when user clicks on the browser action

Figure 1 shows the popup.html before user interaction starts.

All the interaction with the Local Storage takes place through background.html. Figure 2 elaborates how this interaction looks like,

Figure 2 : Interaction between Popup page, backogrund page and Chrome's Local Storage 

Extension Use Cases

	User enters first name 1. User enters a name 2. Clicks on store button 3. 'jane' is stored int he local storage and updated as Last Value stored 1
	User enters second name 4. Users enters 'adam' 5.Presses store button, 'adam' is stored in local storage 6. 'adam' is updated as last value stored 1 7. jane is moved from last value 1 to Last Value 2
	Use enters third name 8. User enters 'george' 9.Presses store button, value is stored in local storage 10. 'george' becomes Last Value stored 1 11,12 : Previously stored values are moved as shown in the figure

Continue reading Section 3 to learn how the example code works. 

(The above article is taken from code.google.com under Creative commons licensing)