The Session storage is available through the window.sessionStorage attribute. It is intended to keep short-lived data opened in the same tab or window and shared only between the pages of the same domain. The browser creates a new session storage database every time a user opens a new tab or a window.

As opposed to the Session storage, the Local storage is available via the window.localStorage attribute and allows you to keep data longer than a single session. The Local storage saves all data in a special local storage area and is not limited to the lifetime of the tab or a window. The local storage area is shared between different tabs and windows and can be very handy in multitransactional scenarios.

Let's see how we can change the examples from the previous Cookies section to use them in Web Storage. We will not delete the cookie completely so that we have chance to compare different persisting techniques. Open the shopping_cart_web_storage project. In the following code, we add the business logic to check whether Web Storage is supported by the web browser with the StorageManager class:

abstract class StorageManager {
  factory StorageManager() {
    if (WebStorageManager.supported) {
      return new WebStorageManager();
    } else {
      return new CookieStorageManager();
    }
  }
  
  Future<String> getItem(key);
  Future setItem(key, value);
  Future removeItem(key);
}

In the preceding code, you can see the new WebStorageManager class. It is quite difficult to determine whether the web browser supports Web Storage or not. You may find one of the possible solutions in the following code that uses the supported getter method. The getItem function returns the value associated with the given key. The setItem function sets a key-value pair in this method and the last method removes the item with the specified key. The code is as follows:

class WebStorageManager implements StorageManager {
  static bool get supported {
    if (window.localStorage != null) {
      try{
        window.localStorage["__name__"] = "__test__";
        window.localStorage.remove("__name__");
        return true;
      } catch(e) {
        return false;
      }
    } else {
      return false;
    }
  }

Future<String> getItem(key) {
  return new Future.sync(() {
    return window.localStorage[key];
  });
}

Future setItem(key, value) {
  return new Future.sync(() {
    window.localStorage[key] = value;
  });
}
Future removeItem(key) {
  return new Future.sync(() {
    window.localStorage.remove(key);
  });
}

The following screenshot shows the result of executing the program:

You can find information about the status of the local storage in the same place where we saw the cookies. Expand the Local Storage tree item and choose the localhost option to see the local storage data:

Now, we can use Web Storage and cookies to store a date for the client. We will continue our trip across advanced storages and the next target is Web SQL.