Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • WebStorage in HTML5

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 713
    Comment on it

    WebStorage in HTML5:

    It is an alternative to cookies and it is better than cookies. With the help of localstorage we can store data locally inside user browser. It is more secure as compared to cookies. It can be modified  easily using  setItem() and getItem() method.


    Locastorage Objects:

    1. window.localStorage
    2. window.sessionStorage

    localStorage Object:

    It store user data with no expiration date means user data will persist even when browser has been closed.


    sessionStorage Object:

    It is similar to localstorage except that  it stores the data for only one session. The data gets deleted once  user closes the specific browser tab.


    Example:

    <div class="container">
    	
    	<div class="right-container">
    		
    		<h3>To do List</h3>
    		<ul id="list-items"></ul>
    
    		<form class="sub-form">
    			<input type="text" class="listdata">
    			<button class="add-r" type="button">Add to List</button>
    		</form>
    	</div>
    </div>
    <script type="text/javascript">
     	$(document).ready(function () {
    		$('#list-items').html(localStorage.getItem('listItems'));
    			
    		$('.container').on('change', '.checkbox', function() 
    		{
    			if($(this).attr('checked')) 
    			{
    				
    				$(this).attr('checked', 'checked');
    				$(this).parent().addClass('completed');
    	
    			} 
    			else if(!$(this).attr('checked')) 
    			{
    				$(this).parent().removeClass('completed');
    				$(this).removeAttr('checked');
    			
    			}
    
    			localStorage.setItem('listItems', $('#list-items').html());
    		});
    
    		$('.add-r').click(function(event) 
    		{
    			
    			event.preventDefault();
    			var udata=$('.listdata').val();
    			if(udata!='')
    			{
    				$('#list-items').append("<li><input class='checkbox' type='checkbox'>"+ udata +"<a class='remove'><i class='fa fa-trash' aria-hidden='true'></i></a><hr></li>");
    			}
    
    			localStorage.setItem('listItems', $('#list-items').html());
    
    			$('.listdata').val("");
    
    		});
    
    		$('.container').on('click', '.remove', function()  
    		{	
    			
    			$(this).parent().remove();
    			var del=$(this).parent('li');
    			
    			if($("#list-items").hasClass('.completed'))
    			{
    				
    				$(this).parent().remove();
    				
    		 	}
    					
    			localStorage.setItem('listItems', $('#list-items').html());
    			
    		});
    
    	});
    </script>

    In the above code we are creating to-do list and storing locally the tasks added using localstorage object.

     

    You can see the working demo of localstorage in the attachment  provided.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: