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(); } setStyles(); function populateStorage() { localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); localStorage.setItem('font', document.getElementById('font').value); localStorage.setItem('image', document.getElementById('image').value); } 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 Web Storage Demo.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'Storage' in that specification. |
Living Standard |
Browser compatibility
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