How to store a data in browsers local storage and access it using JQuery

If you want to store a data in web browser and again access that data.Let's see example that stores form's data as a object and then that object will be stores into one array that array will be stores in local storage.

Then again access that array from local storage and access that objects values.

When you enter all fields of form and click on save button then form's data or your entered data is collected as objects data then that data will be stores in local storage of your browser like as follows

local storage

into above picture itemlist is an array which will have a object that is having form data.

That data will be shown into a table.

When you refresh the page then that table data will be exist because that table data will be exist in local storage of browser

index.html

<html>
  <head>
    <title>Json</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
      <div class="container">
          <div class="row">
          <div class="col-md-6">
              
              <form >
                <div class="form-group">
                  <label for="Value">Enter Name:</label>
                  <input type="text" class="form-control" id="name">
                </div>
                <div class="form-group">
                    <label for="Value">Enter Mail:</label>
                    <input type="email" class="form-control" id="email">
                  </div>
                  <div class="form-group">
                    <label for="Value">Enter Phone:</label>
                    <input type="number" class="form-control" id="phone">
                  </div>
                <button type="button" class="btn-success" id="mybtn">Save</button>
              </form>
          </div>
          <div class="col-md-6">
              <ul id="mylist">

              </ul>
              <table class="table table-bordered " id="mytable">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                  </tr>
                </thead>
                <tbody>

                    </tbody>
          </div>
        </div>
      </div>
   
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="js/app.js">
    </script>
  </body>
</html>

app.js

var myarray = [];

$(document).ready(function(){
    var output ="";
    $("#mybtn").click(function(){
      var nameval = $("#name").val();
      var emailval = $("#email").val();
      var phoneval = $("#phone").val();
      $("#mytable tbody").append(`<tr><td>${nameval}</td><td>${emailval}</td><td>${phoneval}</td></tr>`);
      var student = {
          name : nameval,
          email : emailval,
          phone : phoneval
      };
     
      
     
      if(localStorage.getItem("itemlist")){
          myarray = JSON.parse(localStorage.getItem("itemlist"));
          myarray.push(student);
        }
        else{
            myarray.push(student)
        }
      
      localStorage.setItem("itemlist", JSON.stringify(myarray));
      
      
      
    });
    if(localStorage.getItem("itemlist")){
        var myobjarray = localStorage.getItem("itemlist");
        var myarr = JSON.parse(myobjarray);
        myarr.forEach(function(ele){
            output +=  `<tr><td>${ele.name}</td><td>${ele.email}</td><td>${ele.phone}</td></tr>`;
        });
        $("#mytable tbody").html(output);
    }
    
    
  });

style.css

form{
    margin: 15px;
}

How to store a data in browsers local storage and access it using JQuery

Search

Categories