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.
