Watch the video below to learn how to store your data like you do in MySQL in JavaScript.

HTML Code:

<!DOCTYPE html>
<html>

<head>

	<title> DOM DB - Javascript Storage Like MYSQL </title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<meta name="description" content="Learn how to use javascript like mysql ">

	<meta name="author" content="Code With Mark">
	<meta name="authorUrl" content="http://codewithmark.com">

	<!--[css/js files > start]-->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

	<script src="https://cdn.awesomefunctions.com/awesome-functions.min.js"></script> 
	<!--[css/js files > end]-->


	<script src="storage.js"></script> 
 
 
</head>


	<script type="text/javascript">

		//dom storage data
		
 		var tblTasks = 
		[				
			{ 
				rec_id:js.MD5(),
				TaskName : 'Task 1', 
				TaskDate : moment().format("YYYY-MM-DD"), 
				TaskDesc : "This is description 1", 
			},
			{ 
				rec_id:js.MD5(),
				TaskName : 'Task 2', 
				TaskDate : moment().format("YYYY-MM-DD"), 
				TaskDesc : "This is description 2",
			},			
			{ 
				rec_id:js.MD5(),
				TaskName : 'Task 3', 
				TaskDate : moment().add(7, 'days').format("YYYY-MM-DD") , 
				TaskDesc : "This is description 3",
			}
		]; 

		console.table(tblTasks);

		//var tblTasks = []



	 
	</script>

<body> 

<h1 class="text-center">Javascript Storage Like MYSQL</h1>

<!--[Menu - Start]-->
<div class="text-center">

	<div class="btn btn-success BTN_Add_New"> Add New</div>
	
	<div class="btn btn-success BTN_View"> View All Tasks</div>

	<div class="btn btn-success BTN_Delete_All"> Delete All Tasks</div>

</div>
<!--[Menu - End]-->
<br><br>



<!--[Screen Data - Start]-->
<div class=" container Screen Screen_Data  "  >  </div>
<!--[Screen Data - End]-->



<!--[New Task Template - Start]-->
<div class="Screen Template_New_Task" style="display:none;"  >

	<div class="panel panel-primary  center-block" style="max-width:400px;">
	  
	  	<div class="panel-heading text-center">Add A New Task</div>

	  	<!--[New Task Body - Start]-->
		<div class="panel-body"> 

			<!--[Task Name - Start]-->
			<div class="input-group">
				<span class="input-group-addon">Task Name</span>
				<input   type="text" class="form-control TaskName"  placeholder="Type In Task Name"   >
			</div>
			<br><br>
			<!--[Task Name - End]-->

			<!--[Completion Date - Start]-->
			<div class="input-group">
				<span class="input-group-addon">Task Completion Date</span>
				<input   type="date" class="form-control TaskDate"  >
			</div>
			<br><br>
			<!--[Completion Date - End]-->


			<!--[Task description - Start]-->
			<div class="input-group">
				<span class="input-group-addon">Task description</span>
				<textarea class="form-control TaskDesc" rows="5" placeholder="Type In Task description"></textarea>
			</div>
			<br><br>
			<!--[Task description - End]-->

			<div class="btn btn-primary text-center btn_Task"> View All Tasks</div>

		</div>
	  <!--[New Task Body - Start]-->
	</div>
</div>
<!--[New Task Template - Start]-->




</body>



</html>
 

Storage.js Code

$(document).ready(function()
{		


 	
 	//load new task screen 
 	$(document).on('click', '.BTN_Add_New', function(event) 
 	{
 		//Get data from template
 		var GetTemplateData = $('.Template_New_Task').html();

 		$('.Screen_Data').html(GetTemplateData);
 		$('.Screen_Data').find('.btn_Task').html('Save').addClass('BTN_Save_New_Task')
 		$('.Screen_Data').show();
 	});


 	//new task screen add button action
 	$('.Screen_Data').on('click', '.BTN_Save_New_Task', function(event) 
 	{	 
 		//To clear all old alerts
		bs.ClearError();

 		//Get values
 		var TaskName = $('.Screen_Data').find('.TaskName');
		var TaskDate = $('.Screen_Data').find('.TaskDate');
 		var TaskDesc = $('.Screen_Data').find('.TaskDesc');

 		if(frm.IsEmpty(TaskName.val() ))
		{
			//Show alert
			bs.ShowError ("Please enter Task Name",TaskName)
		}
		else if(frm.IsEmpty(TaskDate.val()))
		{
			//Show alert
			bs.ShowError ("Please enter Task Completion Date",TaskDate)
		}
		else if(frm.IsEmpty(TaskDesc.val()))
		{
			//Show alert
			bs.ShowError ("Please enter Task description",TaskDesc)
		}
		else
		{			 
			var AddTask = 
			{ 
				'rec_id':js.MD5(),
				'TaskName' : TaskName.val(), 
				'TaskDate' : TaskDate.val(), 
				'TaskDesc' : TaskDesc.val(), 
			};

			//ls.AddArr(LocalstorageName,AddTask);
			tblTasks.push(AddTask);
			
			var d = bs.AlertMsg("Successfully add your new task", "success");
			$('.Screen_Data').html(d);

			//Show All tasks
			 
			$(".BTN_View").click();
		}
				
 
 	});
 	//--->Add - End



 	//--->View - Start
	$(document).on('click', '.BTN_View', function(event) 
 	{
 		//Get data  
 		var AllTasks = tblTasks;
 		 

 		if(js.Size(AllTasks) < 1 || js.Size(AllTasks)==0)
 		{ 
 			var d = bs.AlertMsg("Oppps...Looks like there are no tasks. <br><br> You should add a task first", "warning");
			$('.Screen_Data').html(d).show();
 			return false;
 		}

 		//console.table(AllTasks);

 		var strTableData = '';
 		strTableData +='<table class="table table-hover">';
 		strTableData += '<thead>';
 		//strTableData += '<tr>';
 		strTableData += '<th>Line Num</th>';
 		strTableData += '<th>Task Name</th>';
 		strTableData += '<th>Task Date</th>';
 		strTableData += '<th>Task Desc</th>';
 		strTableData += '<th>Options</th>';
 		//strTableData += '</tr>'; 		
 		strTableData += '</thead>';


 		strTableData += '<tbody>'
 		for (var i = 0; i < AllTasks.length; i++) 
 		{
 			var val = AllTasks[i]; 			 
 			
 			var line_num = i+ 1;
 			
			strTableData += '<tr>';
		 	strTableData += '<td>'+line_num +'</td>';
			strTableData += '<td>'+val.TaskName+'</td>';
			strTableData += '<td>'+moment(val.TaskDate).format('M-D-Y')+'</td>';
			strTableData += '<td>'+val.TaskDesc+'<td>'; 

			//Edit/Delete Options
			var Edit = '<a href="#" class="BTN_Edit_Entry" rec_id="'+  val.rec_id +'" TaskDate="'+  val.TaskDate +'" >Edit</a> / ';
			var Delete = '<a href="#" class="BTN_Delete_Entry" rec_id="'+  val.rec_id +'"  TaskDate="'+  val.TaskDate +'"  task_name="'+val.TaskName+'">Delete</a>';

			strTableData += '<td>'+Edit+Delete+'<td>'; 
			strTableData += '</tr>'; 
 			 
 		};
 		strTableData += '<tbody>'
 		strTableData += '</table>';

 		$('.Screen_Data').html(strTableData).show();

 	});
	//--->View - End


	//--->Edit - Start	
	$(document).on('click', '.BTN_Edit_Entry', function(event) 
 	{
 		var rec_id  = $(this).attr('rec_id');
 		var TaskDate = $(this).attr('TaskDate');

 		//Get data from template
 		var GetTemplateData = $('.Template_New_Task').html();

 		$('.Screen_Data').html(GetTemplateData);
 		$('.Screen_Data').find('.btn_Task').html('Update').addClass('BTN_Update_Task');
 		$('.Screen_Data').find('.btn_Task').attr('rec_id', rec_id);

		//map and grep
		var data = $.map( tblTasks, function( val, i) 
		{		
			if(val.rec_id == rec_id)
			{ 
				return val;
			}
		});
	 


 		var TaskName = $('.Screen_Data').find('.TaskName').val(data[0].TaskName);
		var TaskDate = $('.Screen_Data').find('.TaskDate').val(data[0].TaskDate);
 		var TaskDesc = $('.Screen_Data').find('.TaskDesc').val(data[0].TaskDesc);
 
 		$('.Screen_Data').show();
 	});

 	//Update task
	$('.Screen_Data').on('click', '.BTN_Update_Task', function(event) 
 	{	 
 		//To clear all old alerts
		bs.ClearError();

 		//Get values
 		var TaskName = $('.Screen_Data').find('.TaskName');
		var TaskDate = $('.Screen_Data').find('.TaskDate');
 		var TaskDesc = $('.Screen_Data').find('.TaskDesc');

 		if(frm.IsEmpty(TaskName.val() ))
		{
			//Show alert
			bs.ShowError ("Please enter Task Name",TaskName)
		}
		else if(frm.IsEmpty(TaskDate.val()))
		{
			//Show alert
			bs.ShowError ("Please enter Task Completion Date",TaskDate)
		}
		else if(frm.IsEmpty(TaskDesc.val()))
		{
			//Show alert
			bs.ShowError ("Please enter Task description",TaskDesc)
		}
		else
		{		
			var rec_id  = $(this).attr('rec_id');

			//Update value
			
			var data = $.map( tblTasks, function( val, i) 
			{		
				if(val.rec_id == rec_id)
				{ 
					val.TaskName = TaskName.val();
					val.TaskDate = TaskDate.val();
					val.TaskDesc = TaskDesc.val();												
				}
			});

			var d = bs.AlertMsg("Successfully update your task", "success");
			$('.Screen_Data').html(d);

			//Show All tasks			 
			$(".BTN_View").click();
		}
 	});
	//--->Edit - End

	//--->Delete - Start
	$(document).on('click', '.BTN_Delete_Entry', function(event) 
 	{
 		var rec_id  = $(this).attr('rec_id');
 		var task_name = $(this).attr('task_name');

 		var ObjArrOptions = 
		{
		  text: "Are you sure you want to delete Task Name (<b>"+task_name+"<b>) ?",
		  title: "Confirmation required",
		  confirm: function(button) 
		  {				

			//delete only one element from array
			var newarr = $.map( tblTasks, function( val, i) 
			{		
				if(val.rec_id !== rec_id)
				{ 					 
					return val;
				}
			});

			//update array elements
			tblTasks =  newarr;
		


			//Show All tasks			 
			$(".BTN_View").click();

		  },
		  cancel: function(button) 
		  {
		    // nothing to do
		  },
		  confirmButton: "Yes I am",
		  cancelButton: "No",                       
		  confirmButtonClass: "btn-danger",    //Bootstrap button class
		  cancelButtonClass: "btn-default",    //Bootstrap button class
		  dialogClass: "modal-dialog modal-lg" // Bootstrap classes for large modal
		}

		//Call is like this
		bs.confirm(ObjArrOptions);

 	});
	
	$(document).on('click', '.BTN_Delete_All', function(event)  	
 	{
 		var AllTasks = _.sortBy(tblTasks, ['TaskDate']);
 		
 		if(js.Size(AllTasks) < 1 || js.Size(AllTasks)==0)
 		{ 
 			var d = bs.AlertMsg("Oppps...Looks like there are no tasks. <br><br> You should add a task first", "warning");
			$('.Screen_Data').html(d).show();
 			return false;
 		}


 		var ObjArrOptions = 
		{
		  text: "Are you sure you want to delete All Tasks ?",
		  title: "Confirmation required",
		  confirm: function(button) 
		  {
			//delete all data from array
			tblTasks = [];
			//Show All tasks			 
			$(".BTN_View").click();

		  },
		  cancel: function(button) 
		  {
		    // nothing to do
		  },
		  confirmButton: "Yes I am",
		  cancelButton: "No",                       
		  confirmButtonClass: "btn-danger",    //Bootstrap button class
		  cancelButtonClass: "btn-default",    //Bootstrap button class
		  dialogClass: "modal-dialog modal-lg" // Bootstrap classes for large modal
		}

		//Call is like this
		bs.confirm(ObjArrOptions);
 		
 	});
	//--->Delete - End

	//Show tasks on page load
	if(js.Size(tblTasks) >0 )
	{ 
		$(".BTN_View").click(); 	
	}
});

Give this a try and you will be amazed as to how fast your web application become.










Name

Email

Website

Comment

Post Comment