Скачать или смотреть Web Storage in HTML5

Follow this step by step tutorial to learn about html5 web storage feature and see different types of web storage sessions.

Don't forget to check out our site http://howtech.tv/ for more free how-to videos!
   / ithowtovids   - our feed
  / howtechtv   - join us on facebook
https://plus.google.com/1034403827176... - our group in Google+

Web storage is the feature that enables the web pages to store the data in user's browser. Before this feature, it was done through cookies, but after HTML5, this process has been made faster and secure. In this tutorial we will learn html5 webstorage feature.

Step # 1 -- Checking Browser Support

Before using web storage, website should make sure to check whether the browser supports the two functions of HTML5 web storage.

The coding shown in the image below gives the concept of checking whether the web storage feature is supported by the browser or not.

Step #2 - Local Storage

Local storage is the type of the storing in which the data is not removed even after the browsing session has ended.

In the example shown, we actually are creating a local storage key and after that we are retrieving that key and inserting into document.getElementById function.

Step # 3 -- Local Storage in an Example

The code in example is about counting the number of time user has clicked a button.

Step # 4 - Inserting Local Storage inside HTML Body

The image below shows how we will use the code in the body of html page.

Step # 5 - Session Storage Example

Now let's consider the sessionStorage object, which is the same as localStorage except it stores data only for one session.

Step # 6 - Body code of Session Storage

The coding shown in the image will be implemented in the body of html to check session for web storage in html5.

And this was all about web storage in html5.