Revision 703785 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 id="Methods">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 id="Examples">Examples</h2>
<p>Here we access a <code>Storage</code> object by calling <code>localStorage</code>. We first test whether the local storage contains data items using <code>!localStorage.getItem('bgcolor')</code>. If it does, we run a function called <code>setStyles()</code> 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, <code>populateStorage()</code>, which uses {{domxref("localStorage.setItem()")}} to set the item values, then runs <code>setStyles()</code>.</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>
<div class="note">
 <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>
</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}</td>
   <td>{{Spec2('Web Storage')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>localStorage</td>
    <td>4</td>
    <td>3.5</td>
    <td>8</td>
    <td>10.50</td>
    <td>4</td>
   </tr>
   <tr>
    <td>sessionStorage</td>
    <td>5</td>
    <td>2</td>
    <td>8</td>
    <td>10.50</td>
    <td>4</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>2.1</td>
    <td>{{ CompatUnknown }}</td>
    <td>8</td>
    <td>11</td>
    <td>iOS 3.2</td>
   </tr>
  </tbody>
 </table>
</div>
<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="https://dev-test.nemikor.com/web-storage/support-test/" title="https://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
<div class="note">
 <p><strong>Note: </strong>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.</p>
</div>
<h2 id="See_also">See also</h2>
<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>