Saving data using Local Storage

Ever thought of making your own To-do list web app or a game that can save user’s high score? Then Local Storage may help to make your life a little easier. Local Storage stores data in the browser and the data will remain save even if the browser is closed.

Local Storage stores data with key/value pair, that means for each data there is a corresponding key and when the key is entered, data is retrieved.

We need to know some methods to use this API-

Methods
localStorage.setItem(key,value)
localStorage.getItem(key)
localStorage.removeItem(key)
localStorage.clear
localStorage.key
localStorage.length

Let’s illustrate these methods using a simple example. Suppose we ask for user name and it can be save and delete. First we set up the HTML page-

<!DOCTYPE html>
<head>
<title>LocalStorage</title>
<meta charset="utf-8">
</head>
<body>
Enter Your Name<input type='text' id='userName'>
</form>
<button id='addName'>Save</button>
<button id='deleteName'>Delete</button>
<p id='savedName'></p>


<script src='data2.js'></script>
</body>
</html> 

We will be using localStorage API with JavaScript and I will explain the important steps.


var userName=document.getElementById('userName'),
savedName=document.getElementById('savedName');

var add_name=function(){
var name=userName.value;
localStorage.setItem('user',name);
savedName.innerHTML='Hello '+name;
}

var delete_name=function(){
savedName.innerHTML=&quot;&quot;;
localStorage.removeItem('user');
}

document.getElementById('addName').addEventListener('click',function(){
add_name();
});
document.getElementById('deleteName').addEventListener('click',function(){
delete_name();
})

window.onload=function(){
if(localStorage.length&gt;0){
var key=localStorage.key('user')
savedName.innerHTML='Hello '+localStorage.getItem(key);
}
}

On line 6, the name is saved using localStorage.setItem and the key for the name is given as ‘user’, you can use any other string or variable.

On line 12,localStorage.remove is called with the key and this removes the stored value from the localstorage’s array.

On line 23, when the browser is opened we check if there is any data previously stored using localStorage.length.This checks the number of elements in the array of localStorage. If it is 0 it won’t do anything,but if it is greater than zero, we retrieve the key using localStorage.key which gives the key name. Then finally we get the value of the corresponding key using localStorage.getItem which provides the required data.

Another method we haven’t use in our example is localStorage.clear. What it does actually is it remove all the elements saved in localStorage from the browser, so you should be careful using this one.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s