Gameplay in HTML5: Storage

Homework #8 review

Instructor's solution

http://EpsilonDelta.us/UW_GameplayHTML5/Homework/Solutions/8

Overview

Cookies

Web Storage

Overview

Web Storage is a new HTML5 API. Like cookies, it stores string key-value pairs, but unlike cookies:
  • Much larger data are allowed: at least 2 MB and usually 5 MB or more per domain.
  • Data stay on the client and are not transmitted to or from the server.
  • A simple interface is provided to save, retrieve, and remove data.
There are actually two storage objects: sessionStorage and localStorage. We will be using the latter.

API

You can add a new datum or change an existing one with any of these:
localStorage.setItem( "aKey" ) = "aValue";
localStorage[ "aKey" ] = "aValue";
localStorage.aKey = "aValue";
          
You can read a value with any of these:
var value = localStorage.getItem( "aKey" );
var value = localStorage[ "aKey" ];
var value = localStorage.aKey;
          
If no value has been assigned for the key, null is returned.
And you can remove a datum with:
localStorage.removeItem( "aKey" );
          
You can remove all data with:
localStorage.clear( );
          
The total number of key-value pairs is localStorage.length, and the keys can be obtained as localStorage.key( n ), where 0 <= n < localStorage.length. So we can iterate through all of the data like this:
for ( i = 0, lim = localStorage.length; i < lim; ++i )
{
    key = localStorage.key( i );
    value = localStorage[ key ];
    ...
}
          
NB: Because local storage is provided at the domain level, and a domain may feature several apps, you should consider using a unique prefix (or similar convention) for the keys for a game.
For the same reason, clear() may remove more items than you want. The iteration over all keys is also of questionable value, though it might be useful if you want to tie data between games together.

JSON

What is JSON?

  • JSON stands for JavaScript Object Notation and was originally specified by Douglas Crockford.
  • It is a standard format for representing data as a human-readable string.
  • Not surprisingly, the representation looks like data literals in JavaScript.
  • Nevertheless, JSON is supported in many languages.
  • JSON is an alternative to XML for many purposes, including
    • transfering data over networks
    • serializing data for storage
  • JSON can represent many types of data: strings, numbers, booleans, arrays, objects, and null.
  • For format details, see json.org

JavaScript support

  • Originally converting to and from JSON required a library, even in JavaScript, but current browser offer native support.
  • JSON.stringify( data ) converts the data object to a string.
  • JSON.parse( json ) converts a JSON string to an object.
  • Example:
    var obj = {
                  str: "Hi",
                  int: 19,
                  arr: [ "Merhaba", 23, { val: null } ]
              };
    console.log( JSON.stringify( obj ) );
                    
  • Using JSON with Web Storage

    • Web Storage requires string values.
    • Using JSON we can store and retrieve most forms of data easily.
    • We can store an item with:
      localStorage[ "aKey" ] = JSON.stringify( data );
                      
    • We can then read it back with:
      var data = JSON.parse( localStorage[ "akey" ] );
                      

    Example

    Example

    Homework #9

    http://EpsilonDelta.us/UW_GameplayHTML5/Homework/Homework_9.html