Revision 703783 of Storage

<p>The <code>Storage</code> 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.</p>
<p>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")}}.</p>
<h2 id="Properties">Properties</h2>
<dl>
 <dt>
  {{domxref("Storage.length")}} {{readonlyInline}}</dt>
 <dd>
  Returns an integer representing the number of data items stored in the <code>Storage</code> object.</dd>
</dl>
<h2>Methods</h2>
<dl>
 <dt>
  {{domxref("Storage.key()")}} {{readonlyInline}}</dt>
 <dd>
  When passed a number n, this method will return the name of the nth key in the storage.</dd>
</dl>
<dl>
 <dt>
  {{domxref("Storage.getItem()")}} {{readonlyInline}}</dt>
 <dd>
  When passed a key name, will return that key's value.</dd>
 <dt>
  {{domxref("Storage.setItem()")}} {{readonlyInline}}</dt>
 <dd>
  When passed a key name and value, will add that key to the storage, or update that key's value if it already exists.</dd>
 <dt>
  {{domxref("Storage.removeItem()")}} {{readonlyInline}}</dt>
 <dd>
  When passed a key name, will remove that key from the storage.</dd>
 <dt>
  {{domxref("Storage.clear()")}} {{readonlyInline}}</dt>
 <dd>
  When invoked, will empty all keys out of the storage.</dd>
</dl>
<h2>Examples</h2>
<p>Here we access a <code>Storage</code> object by calling <code>localStorage</code>. We first test whether the local storage contains a data item using <code>!localStorage.getItem('bgcolor')</code>. If it doesn't, we</p>
<pre class="brush: js">
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);
}</pre>
<p>&nbsp;</p>
<p><strong>Note</strong>: To see this running as a complete working example, see our <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>