localStorage

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

localStorage

This article is Ready to Use.


W3C Proposed Recommendation

Summary

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

Syntax

Note: This property is read-only.

var result = object.localStorage;

Return Value

Returns an object of type Object.


Compatibility

There is no data available for topic "webapi", feature "localStorage". If you think that there should be data available, consider opening an issue.

Examples

JavaScript

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');
}

View live exampleFields and buttons for saving, reading and clearing localStorage items.

HTML

<section>
    <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>

<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>

</section>


<section>

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

</section>

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

JavaScript

/* 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 () {
    window.localStorage.clear();
};

/** 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);

Usage

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/).

Notes

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









  • localStorage



Attribution

This article contains content originally from external sources.

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