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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 13Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
clearChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 13Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
getItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 13Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
keyChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 13Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
lengthChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 13Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
removeItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 13Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
setItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 13Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Last updated by: gdg,