SessionStorage in HTML 5
sessionStorage is an attribute of DOM defined in HTML 5. It is used as a global object in JavaScript or as a sub-object of window, or of an instance of window when several one are opened.
window.sessionStorage.saved="content" sessionStorage is an object of type Storage that represents a storage space defined as an attribute of each window.
It is created for a new visitor and deleted when the user disconnects, or at the request of a script.
It is implemented in browsers since Firefox 3, Internet Explorer 8 and on Chrome, Safari.
There is another object with the Storage interface , localStorage which is independent of the window and the session is a storage space on the site of the user, to replace cookies.
sessionStorage vs. cookies
It is an alternative
to session cookies, but more powerful. The data recorded in the storage are available in all Web pages from the same
site and same user during the session.
So it is similar to the session manager of PHP, and it allows for example to register a password to a user to access all services while he stays connected.
In Internet Explorer 8, the space provided to sessionStorage reaches 10 mega bytes when it is 4 KB for each cookie.
Methods of the Storage interface
The methods of the interface Storage in HTML 5 can be used with sessionStorage.
| Type | Name & arguments | Purpose |
|---|---|---|
| DOMString | key(int) | Returns the name of a key at the index in argument. |
| DOMString | getItem(DOMString) | Returns the value of the key. |
| void | setItem(DOMString, DOMString) | Assigns a value to a key. |
| void | removeItem(DOMString) | Removes the key whose name is in argument. |
| void | clear() | Clear the storage space. All keys are removed. |
A key may be created and a value assigned directly, as in any object. Also you can read the value for a key directly, as shown below.
Testing for compatibility
The support of the object may be checked with this JavaScript code:
if(sessionStorage == null) document.write("Storage not supported by the browser");And in the current case:
Using the object
You can use sessionStorage directly, windows being implied. It must be explicit if that designate another window than the current window.
Values are stored in attributes of the instance of sessionStorage:
sessionStorage.login = "user";or
sessionStorage["login"] = "user";You can access the data stored in the same way:
var login = sessionStorage.login;These attributes are not predefined, they are key as in ab array that are created dynamically.
Demonstration
A text is entered in this page, and we try to display it in another page.
- Retrieve your data in another page. (First click on the Save button)
Documents