< apis‎ | web-storage‎ | Storage
Jump to: navigation, search


This article is Ready to Use.

W3C Proposed Recommendation


Provides a Storage object for an origin, that remains persistent even after restarting the browser. The storage can be cleared by the user with browser functionalities. If you need a temporary storage, use apis/web-storage/Storage/sessionStorage

Property of apis/web-storage/Storage


Note: This property is read-only.

var result = object.;

Return Value

Returns an object of type Object



if (window.localStorage) { // checks if browser support localStorage
  if (localStorage['testKey']) { // checks if value exists
    console.log('Value exist on page load in localstorage for key testKey : ', localStorage['testKey']);
  localStorage['testKey'] = 'Hi again!'; // stores value in localstorage
else {
 console.log('your browser dont support localstorage');

Fields and buttons for saving, reading and clearing localStorage items.


    <label for="key">Key:</label>
    <input type="text" id="key" value="r2d2">
<label for="value">Value:</label> <input type="text" id="value" value="C-3PO">
<button type="button" id="set-local">Save to localStorage</button> </section>


   <label for="get-key">Key:</label>
   <input type="text" id="get-key" value="r2d2">
   <button type="button" id="get-local">Get from localStorage</button>
   <output id="output"></output>



   <button type="button" id="clear">Clear localStorage</button>


View live example

Functions and event handlers for saving, reading and clearing localStorage items.


/* global document, window */
var valueSetHandler = function () {
    /** read the values from the form */
    var key = document.getElementById('key').value,
        value = document.getElementById('value').value;

    /** save value under key in localStorage */
    window.localStorage.setItem(key, value);
valueGetHandler = function () {
    /** read the value from the form */
    var key = document.getElementById('get-key').value,

        /** read the value from the localStorage */
        value = window.localStorage.getItem(key);

    /** write the value in output */
    document.getElementById('output').innerText = value;
clearStorageHandler = function () {

/** register event Listeners for button clicks */
document.getElementById('set-local').addEventListener('click', valueSetHandler);
document.getElementById('get-local').addEventListener('click', valueGetHandler);
document.getElementById('clear').addEventListener('click', clearStorageHandler);


 Use via the methods setItem, getItem, removeItem and clear provided by apis/web-storage/Storage.

Listen to the storage event on dom/Window to catch changes in the storage (example: http://jsfiddle.net/A6tuM/1/).


The localStorage "property" provides an instance of a storage area object, to which the Storage object's properties and methods are applied.

The amount of storage is limited by the browser on a per location basis (e.g. per domain). An error message is thrown, when the quota is exceed.

See for an example of the error message here (the example shows the error message for when the sessionStorage quota is exceeded. The behavior is similar for localStorage): http://jsfiddle.net/wkDc6/1/

Related specifications

Specification Status Related Changes
W3C Web Storage Specification W3C Recommendation

See also

Related articles

Off-line Storage


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article