HTML5 Web Storage

## HTML Basic

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML

## HTML5 News

HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE

## HTML Media

HTML Media HTML Object HTML Audio HTML Video HTML YouTube

## HTML Examples

HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate

## HTML References

HTML Tag List HTML Attributes HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

# HTML5 Web Storage

« Previous
Next Chapter »

HTML5 web storage, a better local storage than cookies.

## What is HTML5 Web Storage?

With HTML5, web pages can store data locally within the user's browser.

Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.

The data is stored in key/value pairs, and a web page can only access data stored by itself.

## Browser Support

Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 7 and earlier versions, do not support web storage.

## localStorage and sessionStorage

There are two new objects for storing data on the client:

- localStorage - stores data with no expiration date
- sessionStorage - stores data for one session

Before using web storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
// Some code.....
}
else
{
// Sorry! No web storage support..
}

## The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

## Example

localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;
Try it yourself »

Example explained:

- Create a localStorage key/value pair with key="lastname" and value="Smith"
- Retrieve the value of the "lastname" key and insert it into the element with id="result"

Tip: Key/value pairs are always stored as strings. Remember to convert them to another format when needed.

The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

## Example

if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
Try it yourself »

## The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

The following example counts the number of times a user has clicked a button, in the current session:

## Example

if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
Try it yourself »
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE