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>

rameshgrg · Accepted Answer · 2017-12-08 06:54:04Z

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>

edited Dec 8, 2017 at 6:54

answered Dec 7, 2017 at 8:19

rameshgrg

214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Usha Prasanna Thadepalli · Accepted Answer · 2017-12-07 08:47:30Z

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>

Collectives™ on Stack Overflow

How to save user input to local storage

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related