search by tags

for the user

adventures into the land of the command line

html5 client side storage

There’s three types of storage available in html5.

-> web storage
-> web sql db
-> indexed db

This post is just about the web storage feature because its the only one I’ve used so far, but I might update this post when I learn more.

All pages within one origin can store and access the same data. The origin’s protocol, domain and port must match. If data is tied to:

http://www.something.com:80

These permutations won’t be able to access the data:

https://www.something.com:80
http://api.something.com:80
http://www.something.com:8080

But this will work:

http://www.something.com:80/somepage
http://www.something.com:80/someotherpage

Storage is limited to 5MB.

There’s two types of web storage:
-> Session Storage
-> Local Storage

Session Storage

Data is stored for the duration of the session. Once the browser tab is closed, the stored session data is lost.

$( ".request_save" ).click(function() {
  // For html session storage
  if (typeof(Storage) !== "undefined") {
    var stored_data = {
                      key1:value1,
                      key2:value2,
                      key3:value3,
                      }
    json_stored_data = JSON.stringify(stored_data)
    if (sessionStorage.request_name) {
      sessionStorage.setItem(some_id, json_stored_data)
    }
    else {
      sessionStorage.setItem(some_id, json_stored_data)
    }
  }
  else {
    // Sorry! No Web Storage support..
  }
});

Local Storage

Data is stored for all future session in the user’s browser cache folder on their computer’s hard drive. Once the browser tab is closed, the stored session data can be retrieved.

Saving data

$( ".request_save" ).click(function() {
  // For html local storage
  if (typeof(Storage) !== "undefined") {
    var stored_data = {
                      key1:value1,
                      key2:value2,
                      key3:value3,
                      }
    json_stored_data = JSON.stringify(stored_data)
    if (localStorage.request_name) {
      localStorage.setItem(some_id, json_stored_data)
    }
    else {
      localStorage.setItem(some_id, json_stored_data)
    }
  }
  else {
    // Sorry! No Web Storage support..
  }
});

Removing saved data from storage

$( ".request_remove").on('click', '.some_class', function() {
  localStorage.removeItem(some_id);
  ...whatever else you want to do
});

Retrieving saved data from storage

// For retrieving the request
$( ".request_retrieve").on('click', '.some_class', function() {
  var retrieved_data = JSON.parse(localStorage.getItem(some_id));
  $( ".some_class" ).val( retrieved_data.some_key );
  $( ".some_class" ).append( $( ".some_class" ).val( retrieved_data.some_value )  )
  ... whatever you want to do with the retrieved data
  })
});

I don’t believe in getting too complicated, so I don’t know if I will learn the other storage types just yet. Maybe one day when I can work on a project that needs it, I’ll jump in.