HTML and CSS Reference
In-Depth Information
Web Storage Implementation
In order to see how simple the Web storage API is, open the Chrome console (on any web
page) and type the following:
> localStorage.setItem('item1', 'This is item 1')
This line of code saved the value 'This is item 1' under the key 'item1'. This will now be
persisted indefinitely, and available to all pages from the same origin as this page.
In order to prove that this has been persisted, open the “Resources” tab of the Chrome deve-
loper tools, and locate “Local Storage” on the left hand side. You should see the following:
If you wish to retrieve this value you can do so with the following call:
> localStorage.getItem('item1')
And if you want to remove the value you can do so with the following call:
> localStorage.removeItem('item1')
Or you can completely clear all data stored by this origin with:
> localStorage.clear()
In addition to the
localStorage
object, the exact same API exists on an object called
ses-
sionStorage
. This performs the same role as
localStorage
, but the data is automatically
cleared when the browser is closed. Data in
localStorage
on the other hand is persisted in-
definitely, although the user is free to clear it at any time.
Web storage is a simple API, but is limited. For instance, if you try to insert an object into
localStorage
it will appear to succeed:
> localStorage.setItem('item1', {})
If you retrieve the value back however, you will see that the persisted value is a string: the
result of calling
toString
on the object:
> localStorage.getItem('item1')
