Hello Readers! In this blog we will be saving the data temporarily in the browser. Earlier we use to achieve such task by using the cookies. But now for a change we will be doing this with the help of sessionStorage object. The sessionStorage object is used to store the data for one session only. The data saved is accessible to the particular window or tab only. Once the window or the tab is closed, the data saved will be deleted.
Data in sessionStorage object are stored into string format and in key-value pairs. This sessionStorage object is supported by the following browsers: Chorme 5+, IE 8+, Firefox 2+, Safari 4+, Opera 10.5+.
Before using the sessionStorage, check for the browser support:
|
if( typeof (Storage) !== “undefined” ) {
// write code for sessionStorage.
}
else {
// Error: Your browser does not support.
}
|
Five methods useful in sessionStorage object:
- getItem( key ) – following method is used to retrieve the value of the key.
- setItem( key, value ) - following method is used to set the value for the given key.
- removeItem ( key ) - following method is used to remove the key.
- key ( position ) - following method is used to return the key for the value.
- clear() - following method is used to delete all key-value pairs.
length – this is a single property which is used to display the number of key-value pairs are currently stored in sessionStorage.
Storage event: is fired on the document object when a change is made to sessionStorage. Following are the properties for the event object:
- key – that was changed
- oldValue – value before operation
- newValue – value after operation
- url – url of the page where the operation was performed
Although, all browsers support sessionStorage but there are some differences in implementations that we are to be aware of:
- While reading a value form sessionStorage, Firefox 3 will return an object which has a property named “value” which contains the actual string value which was stored. Whereas, Firefox 3.5 will return a string while retrieving values.
- Firefox 3 does not support the clear() method whereas Firefox 3.5 does.
- Internet Explorer 8 does not support the delete operator thus it will not allow you to remove a key
- Browser Firefox's and browser Safari's storage limit is 5MB per domain only whereas, Internet Explorer's storage limit is 10MB per domain.
- The only property of an event object which is supported by the Internet Explorer is the “url” property.
Happy Coding :)
0 Comment(s)