Search within TutorialsPark

HTML5 WebStorage API


Use webstorage API to store data in the browser in form of key/value pairs .


HTML5 WebStorage Demo

Current State of local Storage: Entries in the Store.

Local Storage : Key/Value Pairs

Entries:-

Note- localStorage has no expiry date, it remains in the browsers store(even when the browser program is closed), until the localStorage is cleared of all data.


HTML5 WebStorage API

1.The HTML5 WebStorage API allows you to store simple value/pair data locally(client side) in the browser and later be retreived by the documents with same origin.

2.Before WebStorage API cookies performed this function, but had serious drawbacks like:

a. Very small size, just 4KB of data per cookie,thus not suitable for large documents.

b. Required to be repeatedly exchanged between the server and client, thus had a transmission overhead and security risk.

3.But with WebStorage API, data can be stored and updated on the client end ,and can be retreived by Javascript objects which persists across page loads.

4. There exists two types of Webstorage localStorage and sessionStorage, both have a similar functionality but varying levels of storage capacity and lifetime.


Browser Support for Web-Storage API

1.The HTML5 WebStorage API is supported on latest versions of all major browsers.

Compatible Browsers.

internetexplorer safari firefox opera chrome


Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.

2.Before you use WebStorage API on your web document, you need to make sure its supported on the browser. If not you can provide fallback or alternate text, prompting users to update browser

Example: Check Browser Support.

Run the CODE»


localStorage v/s sessionStorage

1.The Data stored with sessionStorage remains in the store as long as the current instance of browser tab or window is running.If the program is closed the Data is removed from the store.

2.While Data stored with localStorage remains in the browser's store for all time even if the browser program is closed.Only way to remove data from localStorage is to use WebStorage API method clear()


Session Storage and Local Storage Objects

1.The Session Storage Interface defines some properties and Methods which can be used with both localStorage and sessionStorage.

2.WebStorage API storage object is used to store data in form of key/value pairs.

Attributes and method of Storage Object(both sessionStorage and localStorage).

Attributes/Method Description
setItem(key,value) Creates or Updates the key/value pair. [Void].
getItem(key) Fetches the value of specified key. [DOMString]
removeItem(key) Deletes the key/value pair of specified key. [String]
"key" An array to fetch value of specified key. [String]
"key[index]" Fetches key with specific key no. [string]
"length" Number of key/value pairs with the Object. [Integer].
clear() Deletes all stored key/value pairs of this object. [Void]
remainingSpace Returns the value to denote the amount of storage space still available to store data.

Local Storage .

1.localStorage functions similar to sessionStorage but the storage values persists across multiple windows and even after browser program is closed.

2.Unlike sessionStorage the with localStorage stored values are shared across all browser tabs and windows handling pages with same origin(i.e same domain)

3. The key/value pairs can be stored within the storage object using method setItem('key', 'value').
Eg: window.localStorage('key', 'value'); or directly with localStorage.key="value";

4. The values can be retreived from specific keys using method getItem('key').
Eg: window.localStorage.getItem('key') or directly with localStorage.key="value";

Example: Local Storage

Run the CODE»


Session Storage

1. The session Storage API stores data for a current session for each browsing context(i.e Browser's tab/window).It persists across page loads, but its lost when the browser program is closed.

2. The sessionStorage is a global object and is limited to a current browser's tab or window, if the page is opened in a new browser tab/window new session is initiated.

3. The key/value pairs can be stored within the storage object using method setItem('key', 'value').
Eg: window.sessionStorage('key', 'value'); or directly with sessionStorage.key="value";

4. The values can be retreived from specific keys using method getItem('key').
Eg: window.sessionStorage.getItem('key').

Example : Session Storage

Run the CODE»


Session Storage and Local Storage Events

1.Both sessionStorage and localStorage support several storage events which are triggered for some changes in the storage area.

2.The storage event handler recieves information in form of StorageEvent object.

Event Parameters of Storage Event.

Parameter Description
key Denotes the key of an entry added into the storage.
oldValue Old value of the item's key that got changed.
newValue Newly Added value of the item's key
url URL of the document that has access to the Storage Area.
storageArea Denotes the Type pf storage Area i.e localStorage or sessionStorage

Local Storage Events


Note: Add any data to the Local Storage and see a change in the events table

1. The storage event is triggered on the window object.

2. The Storage event is fired on all browser tabs and windows except the one that caused the change on the storage object.

Example : Local Storage Events

Run the CODE»


Session Storage Events


Note:Add any data to the Session Storage and see a change in the events table

1. The storage event is triggered on the window object.

2. The Storage event is fired on all browser tabs and windows except the one that caused the change on the storage object.

Example : Session Storage Events

Run the CODE»





Related Examples