[HTML5] APIs – Web Storage

 

To save small amount of data on the client, cookies have been used so far. Now we have a new API called “Web Storage” to do the same things. Why does W3C introduce a new API? Let’s find out.

1. Cookies

A cookie is a piece of data(name-value pair) to be saved on the client. In most cases, Cookies work OK. But they have some limitations:

  • Have size limit: 4KB
  • Need to send the cookie data back and force all the time
  • Hard to write and read a cookie in JavaScript: “document.cookie

 

2. Web Storage

The “Web Storage” is an API for the persistent data storage of key-value pair data in Web clients.

  • You can save more data (5-10 MB per domain)
  • The data is NOT passed on by every server request (You can send data only when it is required)
  • It is much easier to use than a cookie

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

  • LocalStorage: stores data with no time limit
  • SessionStorage: stores data for one session

 

3. API Interfaces

The heart of the API is the “Storage” interface.

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

Now you have a local storage interface and a session storage interface.

interface WindowLocalStorage {
  readonly attribute Storage localStorage;
};

interface WindowSessionStorage {
  readonly attribute Storage sessionStorage; };

The Javascript “window” object implements both “WindowLocalStorage” and “WindowSessionStorage” interfaces, therefore you can access the web stroage directly from the “window” object through properties.

 

4. Local Storage

Let’s write and read a piece of data using the cookie and the local storage.

var key = "greet";
var value = "Hello, World";
var msg = "";

// write
var date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 days
var expire = date.toUTCString();
var myCookie = key + '=' + value + ';' + expire + '; path=/';
document.cookie = myCookie;

// read
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
  var cookie = jQuery.trim(cookies[i]);
  if (cookie.indexOf(key + '=') == 0) {
    msg = cookie.substring(key.length + 1);
  }
}

alert(msg);

Quite complex, right? Now let’s use the local storage API.

var key = "greet";
var value = "Hello, World";

// write
localStorage.setItem(key, value);

// read
var msg = localStorage.getItem(key);

alert(msg);

 

5. Array-like Syntax

You can access web storages like an array or a dictionary collection.

localStorage["greet"] = "Hello, World";
var msg = localStorage["greet"];
alert(msg);

 

6. Dot Notation

You can even use the “.” syntax.

localStorage.greet = "Hello, World!";
var msg = localStorage.greet;
alert(msg);

 

7. Iterating the Web Storage

Another nice feature of the “Storage” interface is to let you iterate each item easily.

localStorage["greet1"] = "Good morning.";
localStorage["greet2"] = "Good afternoon.";
localStorage["greet3"] = "Good evening.";

for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  var value = localStorage[key];
  alert(value);
}

 

8. Removing Data from the Web Storage

The “removeItem(key)” method is used to delete data from the storage. Or you can simply call the “clear()” method to delete all items.

for (var i = 0; i < localStorage.length; i++) {
  var key = localStorage.key(i);
  localStorage.removeItem(key);
}

 

9. Session Storage

You can use the session storage just as you use the local storage.

sessionStorage.setItem("greet", "Hello, World");
var msg = sessionStorage["greet"];
alert(msg);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s