The Storage
interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.
To manipulate, for instance, the session storage for a domain, a call to Window.sessionStorage
is made; whereas for local storage the call is made to Window.localStorage
.
Properties
Storage.length
Read only- Returns an integer representing the number of data items stored in the
Storage
object.
Methods
Storage.key()
- When passed a number
n
, this method will return the name of the nth key in the storage.
Storage.getItem()
- When passed a key name, will return that key's value.
Storage.setItem()
- When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.
Storage.removeItem()
- When passed a key name, will remove that key from the storage.
Storage.clear()
- When invoked, will empty all keys out of the storage.
Examples
Here we access a Storage
object by calling localStorage
. We first test whether the local storage contains data items using !localStorage.getItem('bgcolor')
. If it does, we run a function called setStyles()
that grabs the data items using Storage.getItem()
and uses those values to update page styles. If it doesn't, we run another function, populateStorage()
, which uses Storage.setItem()
to set the item values, then runs setStyles()
.
if(!localStorage.getItem('bgcolor')) {
populateStorage();
} else {
setStyles();
}
function populateStorage() {
localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
localStorage.setItem('font', document.getElementById('font').value);
localStorage.setItem('image', document.getElementById('image').value);
setStyles();
}
function setStyles() {
var currentColor = localStorage.getItem('bgcolor');
var currentFont = localStorage.getItem('font');
var currentImage = localStorage.getItem('image');
document.getElementById('bgcolor').value = currentColor;
document.getElementById('font').value = currentFont;
document.getElementById('image').value = currentImage;
htmlElem.style.backgroundColor = '#' + currentColor;
pElem.style.fontFamily = currentFont;
imgElem.setAttribute('src', currentImage);
}
Note: To see this running as a complete working example, see our [[../../../../../../mdn.github.io/dom-examples/web-storage/index|Web Storage Demo]].
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'Storage' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Storage
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 8 |
Opera
Full support 10.5 |
Safari
Full support 4 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 11 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
clear
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 8 |
Opera
Full support 10.5 |
Safari
Full support 4 |
WebView Android
Full support Yes |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 11 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
getItem
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 8 |
Opera
Full support 10.5 |
Safari
Full support 4 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 11 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
key
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 8 |
Opera
Full support 10.5 |
Safari
Full support 4 |
WebView Android
Full support Yes |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 11 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
length
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 8 |
Opera
Full support 10.5 |
Safari
Full support 4 |
WebView Android
Full support Yes |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 11 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
removeItem
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 8 |
Opera
Full support 10.5 |
Safari
Full support 4 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 11 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
setItem
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 8 |
Opera
Full support 10.5 |
Safari
Full support 4 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 6 |
Opera Android
Full support 11 |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
Storage by Mozilla Contributors is licensed under CC-BY-SA 2.5.