Scribd
Upload
25 views

HTML5 Web Storage

This document discusses HTML5 web storage, which includes local storage and session storage APIs. It explains that web storage allows web applications to store data locally within the user's browser, is supported by most modern browsers, and has advantages over cookies like larger storage limits and not transferring data to the server with each request. It provides examples of how to use the localStorage and sessionStorage objects to store, retrieve, and remove data and a demonstration of tracking user clicks with local storage. The document concludes by mentioning indexed database and web SQL database as topics for further self-study.

Uploaded by

deyaataha9999
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

HTML5 Web Storage

This document discusses HTML5 web storage, which includes local storage and session storage APIs. It explains that web storage allows web applications to store data locally within the user's browser, is supported by most modern browsers, and has advantages over cookies like larger storage limits and not transferring data to the server with each request. It provides examples of how to use the localStorage and sessionStorage objects to store, retrieve, and remove data and a demonstration of tracking user clicks with local storage. The document concludes by mentioning indexed database and web SQL database as topics for further self-study.

Uploaded by

deyaataha9999
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

JavaScript & Advanced

Technologies

HTML5 Web storage


What is Web storage?

 Web storage, is a new APIS introduced in HTML 5, that


includes: local storage and session storage.
 With web storage, web applications can store data locally
within the user's browser.
 Web storage is per origin (per domain and protocol). All
pages, from one origin, can store and access the same data.
 Supported on most browsers currently.
 HTML local storage provides two objects for storing data on
the client:
• window.localStorage - stores data with no expiration date
• window.sessionStorage - stores data for one session (data is lost
when the browser tab is closed)
Why Web Storage is better than Cookies?

 HTML Web storage, better than cookies.


 Web storage is more secure, and large amounts of data can
be stored locally, without affecting website performance.
 Unlike cookies, the storage limit is far larger (at least 5MB)
and information is never transferred to the server.
 Unlike cookies, Web storage not sending the data to server
with each server calls, this will improve the site
performance.
Start using Web storage
 Before using local storage, check browser support for
localStorage and sessionStorage:

if(typeof(Storage) !== "undefined")


{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}
Local storage Object

 window.localStorage - stores data with no expiration date


 To store and retrieve data from local storage object:

//Store
localStorage.setItem("userName", "Ahmed");
//or
localStorage.userName = "Ahmed";

//Retrieve
var result= localStorage.getItem("userName");
//or
var result= localStorage.userName;

//Remove
localStorage.removeItem("userName");
Session storage Object

 window.sessionStorage - 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 specific
browser tab.
 To store and retrieve data from session storage object:
//Store
sessionStorage.setItem("userName", "Ahmed");
//or
sessionStorage.lastname = "Ahmed";

//Retrieve
var result= sessionStorage.getItem("userName");
//or
var result= sessionStorage.userName;

//Remove
sessionStorage.removeItem("userName");
Example

 Example to calc user clicks count:

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).";
Self Study

 Indexed Database API


 Web SQL Database
<script > </script>

<script>document.writeln(“Thank
You!”)</script>

You might also like