javascript local strorage tuttorials

IN THIS TUTTORIALS WE WILL SEE HOW WE USE JAVASCRIPT LOCALSTORAGE WITH EXAMPLE         

The JavaScript  local Storage is the way of storing data at our local storage within specific device by using JavaScript local Storage method example below you will get fully example with complete crude operation of local storage JavaScript code and be patient and read until the end

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="../css\bootstrap.min.css">
<link type="text/css" relrel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../home.css">
</style>
<body class="bg-success">
<div class="container-sm bg-white ">
<div class="container-sm shadow bg-info">
<span id="hid1" class="lu" onclick="document.getElementById('id01').style.display='block';" style="color:red;font-size:45px;margin-left:10px;width:48%">&plus;
</span>
<div id="myDropdown" class="dropdown-content">
<a><span id="hid2" onclick="window.alert('this action can delete entairy table data permenently');dlt()" style="color:red;font-size:20px;width:48%">delete table</span></a>
</div>
</div>
<div class="container-sm shadow m-2 bg-success">
<table class="table table-condensed table-striped table-responsive table-hover bg-white "
id="myTable">
<thead>
<th scope="col" id="no" onclick="no()"><input type="text" style="width:40px;display:none" id="noi"> No</th>
<th scope="col" id="nn" ="fname()"><input type="text" style="width:40px;display:none" id="fnamei">firstname</th>
<th scope="col">midlename</th>
<th scope="col" id="mk1" onclick="mark1()">lastname<input type="text" id="mark1i" style="width: 40px;display: none"></th>
<th scope="col" id="lnamke" onclick="lname()"><input type="text" style="width:40px;display:none" id="lnamei">sid</th>
<th scope="col" id="mark2"><input type="text" style="width:40px;display:none" id="mark2i">age</th>
<th scope="col">gender</th>
<th scope="col" id="mark4"><input type="text" style="width:40px;display:none" id="mark4i">update </th>
<th scope="col" id="mark4"><input type="text" style="width:40px;display:none" id="mark4i">delete</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="id01" class="modal container-sm shadow">
<form class="modal-content animate" action="" name="my-form" onsubmit="event.preventDefault();onformsubmit();">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'"class="close" title="Close Modal"> &times;</span>
</div>
<div class="container-sm shadow p-2">
<p class="bg-success ">
students registiration form
</p>
<input type="hidden" class=" form-control"placeholder=
"" name="mark1" id="mark1" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark2" id="mark2" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark3" id="mark3" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark4" id="mark4" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark5" id="mark5" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark6" id="mark6" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark7" id="mark7" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark8" id="mark8" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark9" id="mark9" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark10" id="mark10" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark11" id="mark11" value="0">
<input type="hidden" class=" form-control"placeholder=
"" name="mark12" id="mark12" value="0">
<input type="hidden" name="av" id="" value="0" />
<input type="hidden" name="no" id="no" value=""> <br>
<input type="hidden" name="id" id="id" value="0"> <br>
<label for="inputJK"class="form-label">first name</label><br>
<input type="text" id="inputNL" name="inputNL" class="form-control mb-2" placeholder="" style="width: 90%">
<label for="inputJK"class="form-label">midle name</label><br>
<input type="text" id="midle" name="midle" class="form-control mb-2" placeholder="" style="width: 90%">
<label for="inputNH" class="form-label">last name</label><br>
<input type="text" id="inputNH" name="inputNH" class="form-control mb-2" placeholder="" style="width:90%">
<label for="inputJK"class="form-label">student id</label><br>
<input type="text"class="form-control " id="inputJK" name="inputJK" style="width: 90%"> <br>
<label for="inputA" class="form-label">age</label><br>
<input type="number" id="inputA" min="02-02-206" max="02-01-1960" value="02-02-206" name="inputA" class="form-control mb-2" placeholder="" style="width: 90%"><br>
<label for="inputb" class="form-label">gender</label><br>
<select name="gender" type="" id="gender" class="form-control">
<option>male</option>
<option>female</option>
<option>costom</option>
</select>
<button type="submit" >save</button>
</div>
</form>
</div>
<div id="id02" class="modal container-sm shadow">
<form class="modal-content animate" action="" name="my-form" >
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'"class="close" title="Close Modal"> &times;</span>
</div>
<div class="container-sm shadow p-2">
<p class="bg-success ">
students registiration form
</p>
<input type="hidden" class="mark1 form-control"placeholder=
"" name="mark1" id="mark1" value="0">
<input type="hidden" class="mark2 form-control"placeholder=
"" name="mark2" id="mark2" value="0">
<input type="hidden" class="mark3 form-control"placeholder=
"" name="mark3" id="mark3" value="0">
<input type="hidden" class="mark4 form-control"placeholder=
"" name="mark4" id="mark4" value="0">
<input type="hidden" class="mark5 form-control"placeholder=
"" name="mark5" id="mark5" value="0">
<input type="hidden" class="mark6 form-control"placeholder=
"" name="mark6" id="mark6" value="0">
<input type="hidden" class="mark7 form-control"placeholder=
"" name="mark7" id="mark7" value="0">
<input type="hidden" class="mark8 form-control"placeholder=
"" name="mark8" id="mark8" value="0">
<input type="hidden" class="mark9 form-control"placeholder=
"" name="mark9" id="mark9" value="0">
<input type="hidden" class="mark10 form-control"placeholder=
"" name="mark10" id="mark10" value="0">
<input type="hidden" class="mark11 form-control"placeholder=
"" name="mark11" id="mark11" value="0">
<input type="hidden" class="mark12 form-control"placeholder=
"" name="mark12" id="mark12" value="0">
<input type="hidden" name="av" id="av" value="" />
<input type="hidden" name="no" id="no" value="0"> <br>
<input type="hidden" name="id" id="id" class="id" value="0"> <br>
<label for="inputJK"class="form-label">first name</label><br>
<input type="text" id="fn" name="inputNL" class="fnam form-control mb-2" placeholder="" style="width: 90%">
<label for="inputJK"class="form-label">midle name</label><br>
<input type="text" id="mid" name="midle" class="mid form-control mb-2" placeholder="" style="width: 90%">
<label for="inputNH" class="form-label">last name</label><br>
<input type="text" id="ln" name="inputNH" class="lnam form-control mb-2" placeholder="" style="width:90%">
<label for="inputJK"class=" form-label">student id</label><br>
<input type="text"class="sid form-control " id="sid" name="inputJK" style="width: 90%"> <br>
<label for="inputA" class="form-label">age</label><br>
<input type="number" id="ag" min="02-02-206" max="02-01-1960" value="02-02-206" name="inputA" class="ag form-control mb-2" placeholder="" style="width: 90%"><br>
<label for="inputb" class="form-label">gender</label><br>
<select name="gender" id="gen" class="sex form-control">
<option>male</option>
<option>female</option>
<option>costom</option>
</select>
<button type="submit" id="sup">save</button>
</div>
</form>
</div>
<script type="text/javascript" src="st10.js">
</script>
</body>
</html>
view raw store.html hosted with ❤ by GitHub
const myForm = document.forms['my-form'],
table = document.querySelector('#myTable tbody'),
dataArr = JSON.parse(localStorage.getItem('st10') || '[]');
//to save date at database
function onformsubmit() {
if (validate()) {
if (selectedRow == null) {
// Menambahkan entri ke LocalStorage :
dataArr.push(Object.fromEntries(new FormData(myForm).entries()));
localStorage.setItem(ap, JSON.stringify(dataArr));
document.getElementById('id01').style.display = 'none';
alert("added successfully");
}}}
// to retrive data frome local storege
dataArr.forEach(row=> {
let newRow = table.insertRow()
newRow.insertCell().textContent = row.no = ++number
newRow.insertCell().textContent = row.inputNL
newRow.insertCell().textContent = row.midle
newRow.insertCell().textContent = row.inputNH
newRow.insertCell().textContent = row.inputJK
newRow.insertCell().textContent = row.inputA
newRow.insertCell().textContent = row.gender
newRow.insertCell().innerHTML = `<a onClick="update(this)" class="btn btn-success" style="background-color:green">update<i class="fas fa-times"></i></a>` // newRow.insertCell().innerHTML = `<a onClick="addmark(this)"><button ><a href="mark.html">add mark</a></button><i class="fas fa-times"></i></a>`
newRow.insertCell().innerHTML = `<a onClick="onDelete(this)" class="btn btn-danger">delete<i class="fas fa-times"></i></a>` // newRow.insertCell().innerHTML = `<a onClick="addmark(this)"><button ><a href="mark.html">add mark</a></button><i class="fas fa-times"></i></a>`
})
//to delete data frome localstorage
function onDelete(td) {
if (confirm('are you sure to delate this data')) {
row = td.parentElement.parentElement;
var index=row.rowIndex-1;
dataArr.splice(index,1);
localStorage.setItem(ap,JSON.stringify(dataArr));
document.getElementById("myTable").deleteRow(row.rowIndex);
alert("deleted successfully");
}
}
//to update dtafrome localstorage
function update(td){
document.getElementById('id02').style.display="block";
row=td.parentElement.parentElement;
var index = row.rowIndex - 1;
var dat=dataArr[index];
var mk1=document.querySelector('#mark1');
mk1.setAttribute("value",dat.mark1);
var mk2=document.querySelector('#mark2');
mk2.setAttribute("value",dat.mark2);
var mk3=document.querySelector('#mark3');
mk3.setAttribute("value",dat.mark3);
var mk4=document.querySelector('#mark4');
mk4.setAttribute("value",dat.mark4);
var mk5=document.querySelector('#mark5');
mk5.setAttribute("value",dat.mark2);
var mk6=document.querySelector('#mark6');
mk6.setAttribute("value",dat.mark6);
var mk7=document.querySelector('#mark7');
mk7.setAttribute("value",dat.mark7);
var mk8=document.querySelector('#mark8');
mk8.setAttribute("value",dat.mark8);
var mk9=document.querySelector('#mark9');
mk9.setAttribute("value",dat.mark9);
var mk10=document.querySelector('#mark10');
mk10.setAttribute("value",dat.mark10);
var mk11=document.querySelector('#mark11');
mk11.setAttribute("value",dat.mark11);
var mk12=document.querySelector('#mark12');
mk12.setAttribute("value",dat.mark12);
var av=document.querySelector('#av');
av.setAttribute("value",dat.av);
var inputNL = document.querySelector('.fnam');
inputNL.setAttribute("value",dat.inputNL);
var inputNH =document.querySelector('.lnam');
inputNH.setAttribute("value",dat.inputNH);
var inputJK =document.querySelector('.sid');
inputJK.setAttribute("value",dat.inputJK);
var inputA = document.querySelector('.ag');
inputA.setAttribute("value",dat.inputA);
var gender =document.querySelector('.sex');
gender.setAttribute("value",dat.gender);
var mid =document.querySelector('.mid');
mid.setAttribute("value",dat.midle);
var id =document.querySelector('.id');
id.setAttribute("value",dat.id);
var sv=document.querySelector('#sup');
sv.addEventListener('click',()=>{
var inputNL = document.querySelector('#fn').value;
var inputNH =document.querySelector('#ln').value;
var inputJK =document.querySelector('#sid').value;
var inputA = document.querySelector('#ag').value;
//var inputb =document.querySelector('#sec').value;
//var depa =document.querySelector('#gr').value;
var gender =document.querySelector('#gen').value;
var midle =document.querySelector('.mid').value;
var mark1 = document.querySelector('.mark1').value;
var mark2 =document.querySelector('.mark2').value;
var mark3 =document.querySelector('.mark3').value;
var mark4 = document.querySelector('.mark4').value;
var mark5 =document.querySelector('.mark5').value;
var mark6 =document.querySelector('.mark6').value;
var mark7 =document.querySelector('.mark7').value;
var mark8 =document.querySelector('.mark8').value;
var mark9 =document.querySelector('.mark9').value;
var mark10 =document.querySelector('.mark10').value;
var mark11=document.querySelector('.mark11').value;
var mark12 =document.querySelector('.mark12').value;
var av =document.querySelector('#av').value;
var id =document.querySelector('.id').value;
dataArr[index]={av,id,inputNL,midle,inputNH,inputJK,inputA,gender,mark1,mark2,mark3,mark4,mark5,mark6,mark7,mark8,mark9,mark10,mark11,mark12};
localStorage.setItem(ap, JSON.stringify(dataArr));
//resetForm();
document.getElementById('id02').style.display="none";
alert("updated successfully");
// resetFormu();
});
}
view raw store.js hosted with ❤ by GitHub

Post a Comment

Contact Form