Client-side Session Management

[Former Member]

• 
  HTML5. It's a mercy!
  
  • 
    1. Requirements
    
  
  
  • 
    2. Distinction
    
  
  
  • 
    3. The Coding
    
    • 
      3.1 main.js
      
    
    
    • 
      3.2 person.js
      
    
    
    • 
      3.3 sessionmanager.js
      
    
    
  
  
  • 
    4. The App
    
  
  

HTML5. It's a mercy!

JavaScript developers can use the new Session and Local Storage API to save data in certain scopes. As a result, it's possible to create a real session context in your web application analog to server-side solutions. In this post i want to show you, how you can use advanced JavaScript desing pattern to create a custom SessionManager API for your web-project. You can download the complete source-code of the example at github. Besides, you can check out the live-demo right here: live-demo

1. Requirements

At first, we have to determine some requirements for the SessionManager.

• It's important to create a JavaScript API, which runs in its own namespace, so we don't have risky side effects to other libraries.
• We want to store real JavaScript objects, so the SessionManager has to do the complete serialization and deserialization.
• We want to store our objects in HTML5 Session Storage, so the lifetime of our data are conscious limited. Moreover, we have to store our data in key-value pairs, which means, that we have to save our object as a JSON-String.

2. Distinction

For this simple example, we don't want to create a generic API, which is able to cast to the correct object-type. We will implement specific functions.

3. The Coding

As you can see in the live-demo, i used the very popular web front-end framework Twitter Bootstrap as a template for the html-sites (sry, but for such a tutorial i can't use SAPUI5). In this example, I don't use any JavaScript-Componets from Bootstrap, so everything what you see in the following listings is pure JavaScript and jQuery code (so usable in a SAPUI5 app).

3.1 main.js

The first js-file called "main.js" represents the interface to HTML templates. These functions are called from input.html and result.html and consist of DOM-operations and function calls to other JavaScript files.

(function(MYSAP, $, undefined) {

          MYSAP.submitPerson = function(){

                    // Read data from DOM

                    var firstName = $('#input_firstname').val();

                    var lastName  = $('#input_lastname').val();

                    var age                = $('#input_age').val();

                    // Create new object

                    var person = new MYSAP.Person(firstName, lastName, age);

                    // Call instance method

                    person.log();

                    // Write to SessionStorage

                    MYSAP.SessionManager.setPerson('person', person);

          };

          MYSAP.readPerson = function(){

                    // Read person from SessionStorage

                    var person = MYSAP.SessionManager.getPerson('person');

                    // If person is not null...

                    if(person){

                              // Call instance method

                              person.log();

                              // Write data to DOM

                              $('#input_firstname').html(person.firstName);

                              $('#input_lastname').html(person.lastName);

                              $('#input_age').html(person.age);

                    }else{

                              // Show warning

                              $('.alert-block').show();

                    }

          }

          MYSAP.clearPerson = function(){

                    // Clear person from SessionStorage

                    MYSAP.SessionManager.clearPerson();

                    // Reload current location

                    location.reload();

          }

}(window.MYSAP = window.MYSAP || {}, jQuery));

3.2 person.js

In person.js i defined a simple model with a function constructor and an exemplary instance method. An object of this prototype represents our session object, which will be stored in HTML5 Session Storage.

(function(MYSAP, $, undefined) {

          // Constructor

          MYSAP.Person = function(firstName, lastName, age){

                    this.firstName = firstName;

                    this.lastName  = lastName;

                    this.age             = age;

          };

          MYSAP.Person.constructor = MYSAP.Person;

          // Sample instance method

          MYSAP.Person.prototype.log = function(){

                    console.log(this.firstName + ' ' + this.lastName + ', ' + this.age + ' years');

          };

}(window.MYSAP = window.MYSAP || {}, jQuery));

3.3 sessionmanager.js

In sessionmanager.js you can see the logic for accessing Session Storage and serialization/deserialization.

( function(MYSAP, $, undefined) {

          MYSAP.SessionManager = function() {};

          MYSAP.SessionManager.getPerson = function(key) {

                    var person;

                    // Get item over SessionStorage API

                    var person_storage = sessionStorage.getItem(key);

                    if (person_storage) {

                              // Parse JSON to object

                              person_storage = JSON.parse(person_storage);

                              // Create new object

                              person = new MYSAP.Person(person_storage.firstName, person_storage.lastName, person_storage.age);

                    }

                    return person;

          };

          MYSAP.SessionManager.setPerson = function(key, person) {

                    if (person) {

                              // Serialize Object to JSON

                              var person_storage = JSON.stringify(person);

                              // Set item over SessionStorage API

                              sessionStorage.setItem(key, person_storage);

                    }

          };

          MYSAP.SessionManager.clearPerson = function() {

                    sessionStorage.removeItem('person');

          }

}(window.MYSAP = window.MYSAP || {}, jQuery));

4. The App

If you submit the first form, all data will be stored into Session Storage. On the next site, data will be read from Session Storage and displayed. When you now switch between both sites, you will see that the result.html will always show the saved data, as long as you don't close your browser or tab.

I wanted to show you with this post, how simple it is to create a web-application with client-side session context. You always will need a session handling concept like this, if you don't create a single-page app.

And now, please enjoy!