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.