Web storage

[edsanimate_start entry_animation_type= “flipInX” entry_delay= “1” entry_duration= “1” entry_timing= “ease-in” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “”]

The web storage is used to store the data in the web browser.

There are two types of web storage

  • local¬†storage
  • session storage

Storage capacity in the web browser is as below

Web browser Storage capacity
Google chrome 5MB
Internet explorer 10MB
Mozilla Firefox 5MB
Opera 5MB

Local storage

The local storage is used to store the data for unlimited session.

If the web browser is closed and reopened, the value is retrieved.

Storage value on the browser

localStorage.setItem(‘key’, ‘value’);

Retrieve value

alert(localStorage.getItem(‘key’));

Sample code

<!DOCTYPE html>

<html>

<body>

<script type=”text/javascript”>

if( localStorage.users)

{

localStorage.users = Number(localStorage.users) +1;

}

else

{

localStorage.users = 1;

}

document.write(“No of visitors :” + localStorage.users );

</script>

</body>

<html>

Session storage

The session storage is used to store the data for the duration of the session.

Storage value for the duration of the session

sessionStorage.setItem(‘key’, ‘value’);

Value gets deleted when browser is closed and re-opened

alert(sessionStorage.getItem(‘key’));

Sample code

<!DOCTYPE html>

<html>

<body>

<script type=”text/javascript”>

if(sessionStorage.users)

{

sessionStorage.users = Number(sessionStorage.users) +1;

}

else

{

sessionStorage.users = 1;

}

document.write(“No of visitors :” + sessionStorage.users );

</script>

</body>

<html>

The following methods are used in both local and session storage.

Value Description
constructor Returns a reference
clear Removes all key/value pairs
getItem Retrieves the current value
key Retrieves the key
length Retrieves the length
setItem Sets a key/value pair
[edsanimate_end]