HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Web Storage API

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a better way than using cookies.

HTML5 web storage allows web applications to store values locally in the browser and can survive the browser session.

Unlike cookies that need to be sent with every HTTP request, thereby affecting website performance, web storage data as information is never transferred to the server and the browser by default allows 5 MB of storage per domain.


Browser compatibility

The numbers in the table specify the first browser version that fully supports the Web Storage API:

API
Web Storage 4 3.5 11.5 4 9

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the user's browser:

  • sessionStorage - stores data for one session (data is lost when the browser tab is closed)
  • localStorage - does the same thing, but persists even when the browser is closed and reopened

Before using web storage, you must check whether user's browser support for localStorage and sessionStorage:



HTML localStorage Object

The localStorage object stores data with no expiration date.

The data is available to all windows with the same origin (domain) even when the browser/tabs are reopened or closed.

Run code

The above code creates a localStorage name/value pair with name="name" and value="Parrot".

Then retrieve the value of "name" and insert it into the element with id="demo".

Name/value pairs are always stored as strings and you can convert them to another format when needed.

The following example set a local storage variable and access that variable every time the page is accessed:

Run code

You can also remove localStorage item.

The syntax for removing the "hits" localStorage item is as follows:

Run code

The following function retrieves three data items from local storage, then uses them to set custom styles on a page:

Run code

HTML sessionStorage Object

The sessionStorage object stores data for one browser session.

The data is deleted when the user closes the specific browser tab.

The following example set a session variable and access that variable:

Run code

Note: Once the user closes the browser window, the sessionStorage will be cleared.


Storage Object Properties and Methods

The following table lists the properties and methods of the Storage object:

Property / Method Description
length Returns an integer representing the number of data items stored in the Storage object
key(n) Returns the name of the nth key in the storage
getItem(keyname) Returns the value of the specified key name
setItem(keyname, value) Adds that key to the storage, or update that key's value if it already exists
removeItem(keyname) Removes that key from the storage
clear() Empty all key out of the storage

Web Storage API

Property Description
window.localStorage Allows to save key/value pairs in a web browser. Stores the data with no expiration date
window.sessionStorage Allows to save key/value pairs in a web browser. Stores the data for one session