Thursday , February 21 2019
Home / Web Technologies / HTML5 / Lesson 16: HTML5 Web Storage

Lesson 16: HTML5 Web Storage

HTML5 Web Storage:

HTML5 Web Storage is new feature in HTML5. With HTML 5, web pages can store data locally within the user’s browser. In Other Words Storing Temporary Data is called as “Web Storage”. While Using Web Storage we can load current details of user, game scores, user preferences etc., on the browser’s internally, temporarily.

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.

Drawbacks of Existing System.

1) Security is less

2) Cookies are stored in the form of text files; so that anybody easily open it, change it, delete it or pro grammatically manipulate it.

3) Most browsers has some limit for the cookies data. Ex: 4kb

where as HTML 5 web storage is a better local storage than cookies.

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

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.

Types of  HTML 5Web Storage:
1) Local Storage
2) Session Storage

1.Local Storage:

data will be available forever, until you manually erase it (or) user deletes it.

 Syntax: localStorage.variable = value;
Example Program:

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


It stores data for one session and data will be cleared automatically, when you close the browser window.

Syntax:   sessionStorage.variable = value;





Print Friendly, PDF & Email

Give us your valuable feedback


About Murali

Hello everyone I am Software Developer having 3+ years of Experience in Microsoft Technologies and Others. My skills :-, C#,, SQL SERVER, web services, windows Service,Windows applications,HTML,CSS, JavaScript,JQuery,AnjularJs

Check Also

Lesson 13:HTML5 New Form Input Types Example

HTML5 New Form Input Types: HTML5 has several new input types for forms. These new …