Session Storage in HTML5 with Demo

• The sessionstorage object exists as a property of window object in supporting browsers. The sessionStorage object stores data that can persist for as long as window or tab is open.Even if you navigate away from page that stores the data and come back, the data saved to sessionStorage is still live.

• The sessionStorage is scoped to the document origin. The document origin is defined by its protocol, hostname, and port. The data stored in sessionStorage is tied to protocol, hostname, and port of the page that saved the information and only the same pages sharing the same protocol, hostname, and port can access the data later.

• The following urls has a different origins:

         http://www.sessionStorage.com        // Protocol: http;                                                                                      //hostname:www.example.com
         https://www.sessionStorage.com       // Different protocol
         http://static.sessionStorage.com     // Different hostname
         http://www.sessionStorage.com:8000   // Different port

• All document with same origin shares the same local storage data. They can read and ovewrite each other's data. But the documents with different origins can never read or overwrite each other's data.

• The sessionStorage is unique to a particluar window or tab. For example, suppose you open gmail in two different tabs of browser and application saves data in the sessionstorage. The data from the first tab is not accessible to other tab, even though the protocol, hostname, and port are exactly the same. Note that the sessionStorage is also scoped by browser vendor. If you visit a site using chrome and the visit the same using Firefox, then any data stored during first visit will not be accessible during the second visit.   

• The window based scoping of sessionStorage is only for top-level windows. If one browser tab contains two iframe element, and those iframe holds two document with same origin, then those two framed documents will share the session storage.

• The data stored in sessionStorage is deleted once the window or tab is closed, or if user request browser to do so. Such behaviour, with data tying to particular window or tab combined, ensures that the data does not get exposed or stored indefinitely.

• The data stored to sessionStorage is saved in key-value pairs where both the key and value are strings.

Demo

Storage API

Demo

• getItem(key) - Returns a value on the basis of a specified key from the DOM storage area. If the key does not exist null is returned.
• setItem(key,value) - Stores a string value along with a specified key inside the DOM storage area.
• removeItem(key) - Removes a value on the basis of a specified key inside the DOM storage area.
• key(index) - Returns the key of a value at the specified index.
• clear() - Clears all data from the DOM storage area.

There is one more property named length, which indicates how many key-value pairs are currently stored in sessionStorage.

        sessionStorage.setItem("Name", "Thierry Henry");        // Store an string with the name "Name"
        sessionStorage.getItem("Name");           // Retrieve a value

        // Enumerate all stored name/value pairs
        for(var i = 0; i < sessionStorage.length; i++) {  // Length gives the # of pairs
            var name = sessionStorage.key(i);             // Get the name of pair i
            var value = sessionStorage.getItem(name);     // Get the value of that pair
        }

        sessionStorage.removeItem("Name");        // Delete the item "Name"
        
        sessionStorage.clear();                // Delete all keys from storage
        
        var count = sessionStorage.length;     // Gets the count of key-value pairs present in sessionStorage
    

Storage Events

Whenever the data stored in localStorage or sessionStorage changes, the browser triggers a storage event on any other Window objects to which that data is visible (but not on the window that made the change). If a browser has two tabs open to pages with the same origin, and one of those pages stores a value in localStorage, the other tab will receive a storage event. Remember that sessionStorage is scoped to the top-level window, so storage events are only triggered for sessionStorage changes when there are frames involved. Also note that storage events are only triggered when storage actually changes. Setting an existing stored item to its current value does not trigger an event, nor does removing an item that does not exist in storage.

Register a handler for storage events with addEventListener() (or attachEvent() in IE). In most browsers, you can also set the onstorage property of the Window object, but at the time of this writing, Firefox does not support that property.

The event object associated with a storage event has five important properties (they are not supported by IE8, unfortunately):

• key - The name or key of the item that was set or removed. If the clear() method was called, this property will be null.

• newValue - Holds the new value of the item, or null if removeItem() was called.

• oldValue - Holds the old value of an existing item that changed or was deleted, or null if a new item was inserted.

• storageArea - This property will equal either the localStorage or the sessionStorage property of the target Window object.

• url - The URL (as a string) of the document whose script made this storage change.

Browser Support

• Firefox 3 returns an object when reading a value from sessionStorage. The object has a property named value that contains the actual string value that was stored. Firefox 3.5 correctly returns a string when retrieving values.
• Firefox 3 doesn’t implement the clear() method; Firefox 3.5 does.
• Internet Explorer 8 doesn’t allow you to remove a key by using the delete operator.
• Firefox 3.5 is the only browser that maintains sessionStorage data when the browser crashes and makes it available when the browser is restarted after a crash.
• Internet Explorer 8 saves data to s asynchronously while the others do so synchronously. To force IE to write immediately, call the proprietary begin() method, then make your changes, then call the proprietary commit() method.
• Firefox’s and Safari’s storage limit is 5MB per domain, Internet Explorer’s limit is 10 MB per domain.
• Internet Explorer 8 only supports the url property of the event object.
• Firefox 3 and 3.5 throw errors when you try to access sessionStorage if cookies area disabled on the browser.

Demo