Contoh
Berikut contoh halaman input data mahasiswa ke dalam local storage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Latihan</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<h2>Data Mahasiswa</h2>
<form>
<div class="mb-3">
<label for="nama" class="form-label">Nama</label>
<input type="text" class="form-control" id="nama" />
</div>
<div class="mb-3">
<label for="npm" class="form-label">NPM</label>
<input type="text" class="form-control" id="npm" />
</div>
<button type="button" class="btn btn-primary" id="simpan">
Submit
</button>
</form>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">NPM</th>
<th scope="col">NAMA</th>
</tr>
</thead>
<tbody id="data">
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
document.getElementById("simpan").addEventListener(
"click",
function () {
let nama = document.getElementById("nama").value;
let npm = document.getElementById("npm").value;
let mhs = { nama: nama, npm: npm };
let listmhs = [];
if (localStorage.getItem("mhs")) {
listmhs = JSON.parse(localStorage.getItem("mhs"));
listmhs.push(mhs);
} else {
listmhs.push(mhs);
}
localStorage.setItem("mhs", JSON.stringify(listmhs));
let data = "";
for (const [idx, dt] of listmhs.entries()) {
data +=
"<tr>" +
"<th scope='row'>" +
(idx + 1) +
"</th>" +
"<td>" +
dt.npm +
"</td>" +
"<td>" +
dt.nama +
"</td>" +
"</tr>";
}
document.getElementById("data").innerHTML = data;
},
true
);
Last updated
Was this helpful?