Skip to content Skip to navigation

Connexions

You are here: Home » Content » HTML5 localstorage

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

HTML5 localstorage

Module by: Hannes Hirzel. E-mail the author

Summary: HTML5 capable browsers provide a storage of data for each web site or web application. For many years cookies have been used for this but the amount of data is limited. Under the property name 'localstorage' each window may have a key-value store of up to 10MB. This module describes the access methods for the storage and gives a usage example.

Introduction

Modern browsers which support HTML5 have a global object called localStorage. It is a key-value store for strings. The data is kept in the browser like a cookie but the storage space is larger. On further visits of the page or when visiting other pages of the same domain the stored data remains accessible.

The specification is not in the main HTML5 document but in a separate webstorage document.

Main methods

  • setItem(aKeyString, aValueString)
  • getItem(aKeyString)
  • removeItem(aKeyString)
  • clear()

Example

You may get an idea how the localStorage works by using for example the scratchpad in the Firefox developer tool set. Enter and execute the following code. 


localStorage.setItem('red','rot');
localStorage.setItem('yellow','gelb');
localStorage.setItem('blue','blau');
This code adds three key-value pairs to the localStorage object.

You may access a value with localStorage.getItem("yellow");

localStorage example with Firefox scratchpad

Notes

To store more complex objects than strings you have to use the global JSON object to convert it to a string. After retrieving the data the JSON object has to be used again to convert it back from a string.

If you want to store a part of a HTML document, for example a list var elem = document.getElementById("myList"); you may use the innerHTML property. localStorage.setItem("myList", e.innerHTML);.

Mozilla Developer Network storage page.

Content actions

Download module as:

PDF | More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks