{{APIRef()}}
The Storage
interface of the Web Storage API provides access to the session storage or local storage for a particular domain, allowing you to for example add, modify or delete stored data items.
If you want to manipulate the session storage for a domain, you call {{domxref("WindowSessionStorage.sessionStorage")}} method; If you want to manipulate the local storage for a domain, you call {{domxref("WindowLocalStorage.localStorage")}}.
Properties
- {{domxref("Storage.length")}} {{readonlyInline}}
-
Returns an integer representing the number of data items stored in the
Storage
object.
Methods
- {{domxref("Storage.key()")}}
- When passed a number n, this method will return the name of the nth key in the storage.
- {{domxref("Storage.getItem()")}}
- When passed a key name, will return that key's value.
- {{domxref("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.
- {{domxref("Storage.removeItem()")}}
- When passed a key name, will remove that key from the storage.
- {{domxref("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 {{domxref("localStorage.getItem()")}} and uses those values to update page styles. If it doesn't, we run another function, populateStorage()
, which uses {{domxref("localStorage.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 Web Storage Demo.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}} | {{Spec2('Web Storage')}} |
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
localStorage | 4 | 3.5 | 8 | 10.50 | 4 |
sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | {{ CompatUnknown }} | 8 | 11 | iOS 3.2 |
All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.
Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.