HTML5 Web Storage

Storing Data on the Client

HTML5 offers two new objects for storing data on the client:

• localStorage - stores data with no time limit
• sessionStorage - stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.
The data is stored in different areas for different websites, and a website can only access data stored by itself.
HTML5 uses JavaScript to store and access the data.

---

The localStorage Object

The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.
How to create and access a localStorage:

Example

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

Try it yourself »

The following example counts the number of times a user has visited a page:

Example

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

Try it yourself »

---

The sessionStorage Object

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.
How to create and access a sessionStorage:

Example

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

Try it yourself »

The following example counts the number of times a user has visited a page, in the current session:

Example

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

Try it yourself »