Contoh

Berikut contoh halaman input data mahasiswa ke dalam local storage

index.html

<!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>

main.js

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
);

PreviousSession Storage NextJSON

Last updated 1 year ago

Was this helpful?

<!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>