Latest web development tutorials

HTML5 Web storage

HTML5 web storage, better than a cookie local storage.

What is HTML5 Web storage?

Use HTML5 can browse the data stored locally on the user.

Earlier, local storage using cookies. But Web security and storage needs more quickly. These data will not be stored on the server, but the data only for the data requested by the user on the site. It can also store large amounts of data without affecting the performance of the site.

Data as key / value pairs exist, web page data is only allowed to use the web access.

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 8+, Firefox, Opera, Chrome, and Safari support Web Store.

Note: Internet Explorer 7 and earlier versions of IE do not support web store.

localStorage and sessionStorage

Two objects stored in the client data is:

  • localStorage - no time limit data storage
  • sessionStorage - Data Storage for a session of

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

if (typeof (Storage)! == "undefined") { // Yes! Support localStorage sessionStorage objects! // Some code ..... } else { // Sorry! Does not support web store. }

localStorage Object

No time limit data storage localStorage object. The next day, after the second week, or next year, the data is still available.

Examples

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

try it"

Analysis examples:

  • Use key = "lastname" and value = "Smith" Create a localStorage key / value pairs
  • Retrieval key for the "lastname" value and then inserts id = "result" element in

Tip: Key / value pairs are usually stored as a string, you can according to their need to convert the format.

The following example shows the number of times a user clicks on a button to convert the string value to a digital code type:

Examples

if (LocalStorage. Clickcount) { . localStorage clickcount = Number (localStorage clickcount .) + 1;} else { . localStorage clickcount = 1;} .. document getElementById ( "result" ) innerHTML = " You have clicked on the button" + localStorage clickcount + "times.";

try it"

sessionStorage objects

sessionStorage method for a session for data storage. When the user closes the browser window, the data will be deleted.

How to create and access a sessionStorage ::

Examples

if (SessionStorage. Clickcount) { . sessionStorage clickcount = Number (sessionStorage clickcount .) + 1;} else { . sessionStorage clickcount = 1;} .. document getElementById ( "result" ) innerHTML = " In this conversation that you have clicked the button" + sessionStorage clickcount + "times.";

try it"