DOM Storage - JavaScript Web Storage

DOM Storage — JavaScript Web Storage

There is no problem with Web apps with server-side back end code, where we can for example store data in MySQL or simply — in files. Thanks to Web storage / DOM storage, our modern web application can store the data itself, and we will handle them in JavaScript.

JavaScript Web Storage

It is a part of the HTML5 specification. We understand web storage as methods and protocols for storing data locally — “in the browser”.

It’s similar to the mechanism of cookies; however, web storage provides more possibilities, including greater capacity available for our data (storage).

Cookies are available both for front (client-side) and server-side (e.g. PHP). Web storage is reserved only for client-side scripting.

Using Web Storage — JavaScript

We have local storage and session storage. The browsers with JavaScript Web storage have the sessionStorage and localStorage variables declared globally.

For sessionStorage the data are set for the duration of the session.

Example — set and get data from sessionStorage:

// set
sessionStorage.setItem('key', 'JavaScript Web Storage!');

// get
alert(sessionStorage.getItem('key'));

For localStorage it looks the same.

Example — set and get data from localStorage:

// set
localStorage.setItem('test', 'Local storage!');

// get
alert(localStorage.getItem('test'));

Simple and easy.

The number of items stored in localStorage we can check with localStorage.length. Thus, we can simply refer to all stored data.

Example:

var output = "DATA:\n-----\n";
if (window.localStorage) {
  if (localStorage.length) {
    for (var i = 0; i < localStorage.length; i++) {
      output += localStorage.key(i) + ': '
        + localStorage.getItem(localStorage.key(i)) + '\n';
    }
  }
}
console.log(output);

Sample result:

DATA:
—–
test: Local storage!
test2: Foo bar

Sample code on GitHub:

https://github.com/dominik-w/js_html5_com/blob/master/web-storage-demo.html

To determine if the browser supports localStorage we can also use the Modernizr library:

if (Modernizr.localstorage) {
  // …
}

Data types

In the web storage we store the key-value pairs. Both keys and values are strings (type). We can keep the data as JSON:

localStorage.setItem('key', JSON.stringify({name: 'myval'}));
alert(JSON.parse(localStorage.getItem('key')).name);

The next examples is a simple counter of clicks:

if (localStorage.cnt) {
    localStorage.cnt = Number(localStorage.cnt) + 1;
} else {
    localStorage.cnt = 1;
}
document.getElementById("result").innerHTML = "You clicked " +
  localStorage.cnt + " time(s)";

The simple and efficient mechanism.