How to Store the Data in Local storage?

Question

I want to keep the form data in the table after reloading or refreshing the page And i want to transfer the same data to the next page after submiting and update in the second page.

Page1.html

<div class="row">
  <div class="col-sm-6">
    <form action="page2.html">
      <table id="productTable" class="table table-bordered table-condensed table-striped">
        <thead>
          <tr>
            <th>Edit</th>
            <th>Product Name</th>
            <th>Introduction Date</th>
            <th>File</th>
            <th> Gender</th>
            <th>Currency Symbol</th>
            <th>Role</th>
            <th>Delete</th>
          </tr>
        </thead>
      </table>
      <input type="submit" value="Submit" onclick="passvalues();" />
    </form>
  </div>
</div> --------> here the data is displayed after submiting the form

<input type="text" class="form-control" name='name' id="productname" />
</div>
<div class="form-group">
  <label for="introdate">
    Introduction Date
  </label>
  <input type="date" class="form-control" id="introdate" />
</div>
<div class="form-group">
  <label for="img">
    image
  </label>
  <input type="file" class="form-control" id="img" />
</div>
<div class="form-group">
  <label for="Job">
    Gender
  </label>
  <div>
    <input type="radio" value="Male" id="radio" name="rate" required />
    <label for="Male" value="Male"><span>Male</span></label>

    <input type="radio" value="Female" id="radio" name="rate" required />
    <label for="Female" value="Female"><span>Female</span></label>
  </div>
</div>
<div class="form-group">
  <label for="Status">
    Status
  </label>
  <div>
    <input type="checkbox" id="checkbox" name='check' value="USD">
    <label for="USD"> USD</label><br>
    <input type="checkbox" id="checkbox" name='check' value="Rupees">
    <label for="Rupees" value="Rupees"> Rupees</label><br>
    <input type="checkbox" id="checkbox" name='check' value="Pound">
    <label for="Pound" value="Pound"> Pound</label><br><br>
  </div>
</div>
<div class="form-group">
  <label for="role">
    Role
  </label>
  <div>
    <select class="form-control" id="role">
      <option value="">Select role..</option>
      <option value="Supervisor">Supervisor</option>
      <option value="Agent">Agent</option>
    </select>
  </div> -----------> Here the form data is submitted

javaScript of the page 1

// Next id for adding a new Product
var nextId = 1;
// ID of Product currently editing
var activeId = 0;

function productDisplay(ctl) {
  var row = $(ctl).parents("tr");
  var cols = row.children("td");

  activeId = $($(cols[0]).children("button")[0]).data("id");
  $("#productname").val($(cols[1]).text());
  $("#introdate").val($(cols[2]).text());
  $("#img").val($(cols[3]).val());
  $("input[type='radio'][name='rate']:checked").val($(cols[4]).text());
  $("input[type='checkbox'][name='check']:checked").val($(cols[5]).text());
  $("#role").val($(cols[6]).text());

  // Change Update Button Text
  $("#updateButton").text("Update");
}

function productUpdate() {
  localStorage.setItem("tabledata", $("#productTable tbody").html());
  var tabledata = localStorage.getItem("tabledata");
  $("#productTable tbody").html(tabledata);

  if ($("#updateButton").text() == "Update") {
    productUpdateInTable(activeId);
  } else {
    productAddToTable();
  }

  // Clear form fields
  formClear();

  // Focus to product name field
  $("#productname").focus();
}

// Add product to <table>
function productAddToTable() {
  // First check if a <tbody> tag exists, add one if not
  if ($("#productTable tbody").length == 0) {
    $("#productTable").append("<tbody></tbody>");
  }

  // Append product to table
  $("#productTable tbody").append(productBuildTableRow(nextId));

  // Increment next ID to use
  nextId += 1;
}

// Update product in <table>
function productUpdateInTable(id) {
  // Find Product in <table>
  var row = $("#productTable button[data-id='" + id + "']").parents("tr")[0];

  // Add changed product to table
  $(row).after(productBuildTableRow(id));
  // Remove original product
  $(row).remove();

  // Clear form fields
  formClear();

  // Change Update Button Text
  $("#updateButton").text("Add");
}

// Build a <table> row of Product data
function productBuildTableRow(id) {
  var ret =
    "<tr>" +
    "<td>" +
    "<button type='button' " +
    "onclick='productDisplay(this);' " +
    "class='btn btn-default' " +
    "data-id='" +
    id +
    "'>" +
    "<span class='glyphicon glyphicon-edit' />" +
    "</button>" +
    "</td>" +
    "<td>" +
    $("#productname").val() +
    "</td>" +
    "<td>" +
    $("#introdate").val() +
    "</td>" +
    "<td>" +
    $("#img").val() +
    "</td>" +
    "<td>" +
    $("input[type='radio'][name='rate']:checked").val() +
    "</td>" +
    "<td>" +
    $("input[type='checkbox'][name='check']:checked").val() +
    "</td>" +
    "<td>" +
    $("#role").val() +
    "</td>" +
    "<td>" +
    "<button type='button' " +
    "onclick='productDelete(this);' " +
    "class='btn btn-default' " +
    "data-id='" +
    id +
    "'>" +
    "<span class='glyphicon glyphicon-remove' />" +
    "</button>" +
    "</td>" +
    "</tr>";

  return ret;
}

// Delete product from <table>
function productDelete(ctl) {
  $(ctl).parents("tr").remove();
}

// Clear form fields
function formClear() {
  $("#productname").val("");
  $("#introdate").val("");
  $("#img").val("");
  $("input[type='radio'][name='rate']:checked").val("");
  $("input[type='checkbox'][name='check']:checked").val("");
  $("#role").val("");
}

function passvalues() {
  var name = $("#productname").val("");
  localStorage.setItem("name", $("#productname").val());
  return false;
}

window.onbeforeunload = function () {
  localStorage.setItem("name", $("#productname").val());
  localStorage.setItem("date", $("#introdate").val());
  localStorage.setItem("image", $("#imge").val());
  localStorage.setItem(
    "radio",
    $("input[type='radio'][name='rate']:checked").val()
  );
  localStorage.setItem(
    "check",
    $("input[type='checkbox'][name='check']:checked").val()
  );
  localStorage.setItem("role", $("#role").val());
  // ...
};

And in Page2.html

<body>
  <div class="row">
    <div class="col-sm-6">
      <table id="productTable" class="table table-bordered table-condensed table-striped">
        <thead>
          <tr>
            <th>Product Name</th>
            <td><span id="result"></span></td>
            <th>Introduction Date</th>
            <th>File</th>
            <th> Gender</th>
            <th>Currency Symbol</th>
            <th>Role</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  <script>
    document.getElementById("result").innerHTML = localStorage.getItem("name");
    -- -- -- > trying to get the data from page 1 to page
  </script>
</body>

I want to show the data in table after reloading a page or refreshing in it. And After Submitting it Those data should load in the page2.html

Answer 1

Use The setItem() method of the Storage interface.

Have a look at the MDN Documentation here - it explains localStorage usage much more in-depth.