How to save user input to local storage

Question

I am creating a score keeping app and need to save the name of the players and the game name in local storage, have no idea how to apply it to the code I have

$(document).ready(function() {
  $("#add-playername").click(function(e) {
    e.preventDefault();
    var numberOfPlayernames = $("#form1").find("input[name^='data[playername]']").length;
    var label = '<label for="data[playername][' + numberOfPlayernames + ']">Playername ' + (numberOfPlayernames + 1) + '</label> ';
    var input = '<input type="text" name="data[playername][' + numberOfPlayernames + ']" id="data[playername][' + numberOfPlayernames + ']" />';
    var removeButton = '<button class="remove-playername">Remove</button>';
    var html = "<div class='playername'>" + label + input + removeButton + "</div>";
    $("#form1").find("#add-playername").before(html);
  });
});

$(document).on("click", ".remove-playername", function(e) {
  e.preventDefault();
  $(this).parents(".playername").remove(); //remove playername is connected to this

  $("#form1").find("label[for^='data[playername]']").each(function() {
    $(this).html("Playername " + ($(this).parents('.playername').index() + 1));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form2" method="post">
  <div class="gamename">
    <label><b>Enter Game Name</b></label>
    <input type="text" name="game name" placeholder="Game Name" id="user_input">
  </div>
</form>
<form id="form1" method="post">
  <div class="playername">
    <label for="data[playername][0]">Add Player Name</label>
    <input type="text" name="data[playername][0]" placeholder="Enter player's name" id="data[playername][0]" />
  </div>
  <button id="add-playername">Add Player</button>
  <br>
  <br>
  <input type="submit" value="Submit" />
</form>

Answer 1

• Grab game and players using the jquery selector on form submit by preventing the form using jquery
• Prepare object for the game and players
• Convert the object to a string using the JSON.stringify( your_data_object) function

• Save to localStorage using localStorage.setItem( 'key' , 'value' ) function

  <script>    
      $('#form1').submit(function(){
  
      var game_name = $("#form2 #user_input").val();
      var players = [];
  
      var players_inputs = $("#form1").find("input[name^='data[playername]']");
  
      $.each(players_inputs, function(){
          var player = $(this).val();
          players.push(player);
      });
  
      var data = {
          game_name : game_name,
          players: players
      }
      console.log(data);
  
      // save to localstorage
      localStorage.setItem('game_players', JSON.stringify(data) );
      event.preventDefault();
  });
  </script>
  

Answer 2

late to answer but something like this

<input type="submit" value="Submit" id="btn_submit" />

<script type="text/javascript">
 $(document).ready(function(){   

    $("#btn_submit").click(function(e){
        e.preventDefault();
        var jsonObj = [];
        players = {}
        count = 0;

        $('input[type=text]').each(function(){
            if($.trim($(this).val()) && ($(this).attr('name').indexOf("playername") >= 0)){
                players[count++] = $(this).val() 
            }
        });

        players['game_name'] = $("#user_input").val();

        jsonObj.push(players);
        console.log(jsonObj);

       var jsonString= JSON.stringify(jsonObj);
       localStorage.setItem("jsonString", jsonString);

       /* remove localstorage */
       // localStorage.removeItem("jsonString");

       /* get localstorage */
       // console.log(localStorage.getItem("jsonString"));
    });
</script>