Data Storage

Cookie Limitations


  • Sent with every HTTP request (in plain text)
  • Limited to 4KB each, 20 per domain. 300 per browser.
  • No real API

Local and Session Storage

  • Not sent to server (more secure / less bandwidth)
  • Limited to 5MB each
  • Long term or session long
  • Simple API


saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', textarea.value);
}, false);
textarea.value = window.localStorage.getItem('value');

Save text value on the client side (crash-safe)

	var el = document.querySelector('#myID');
	// place content from local storage on load if there is one
	el.innerHTML = window.localStorage.getItem('value');
var items = window.localStorage.length;
var lastItem = window.localStorage.key(items-1);

Session Storage

  • use localStorage for persistent storage
  • use sessionStorage for per tab storage

Chrome: view storage: Inspector > Local Storage

  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE 8
  • Well Supported!

Local Storage Code Lab

In this lab, we are going to play with the localStorage object. The user is going to be able to save, read and delete key/value pair from the localStorage

  1. In your labs folder, open the web_storage folder and edit the script.js file
  2. In the code, look for a // TODO 1. What we need to do here is to save a key/value pair into the localStorage. In this function, the key and the value entered by the user have been obtained (variables localKey and localValue)
  3. Look for a // TODO 2. What we need to do here is to remove a key/value pair from the localStorage using the key. The key is passed to the function you are editing with the variable key
  4. Look for a // TODO 3. What we need to do here is to remove every key/value pair from the localStorage
  5. Look for a // TODO 4. Here we want to iterate over the key/value pairs using their index. Thanks to the index, get the key of a key/value pair
  6. Look for a // TODO 5. Thanks to the key you have just got, get the value of the current key/value pair
  7. You should be done by now. Open index.html in a browser and try to add, see, and delete key/value pairs from the localStorage
Files - Solution


var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); 
  db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [ ], successCallback, errorCallback);

ChromeView your database: Inspector > Resources > Databases

    • Chrome
    • Safari
    • Firefox
    • Opera
    • IE 8
    • Well Supported but deprecated November 18, 2010

    Index dB

    Object Store ≠ Relational Database

    Storage of structured data

    Asynchronous API → doesn't block thread

    IDBRequestObject ='dbName');
    HTML5Rocks Tutorial
    iterates over object stores and indexes.
    connection to a database. It's the only way to get a transaction on the database.
    provides access to a database.
    provides access to a client-side database. It is implemented by window objects.
    provides access to the metadata of an index.
    an object store.
    a request to open a database.
    provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.
    a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) you want.
    indicates that the version of the database has changed.
    exception conditions that can be encountered while performing database operations.
    defines a range of keys.
      • Chrome 11
      • Safari
      • Firefox 4
      • Opera
      • IE 10
      • Syntax changed. Old syntax not supported anymore

      HTML5 Offline Applications

      Next ➹