Как сохранить пользовательский ввод в локальное хранилище

Question

Как сохранить пользовательский ввод в локальное хранилище

1

Я создаю приложение для оценки баллов и вам нужно сохранить имя игроков и имя игры в локальном хранилище, не представляя, как применить его к коду, который у меня есть

$(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 name" id="data[playername][0]" />
  </div>
  <button id="add-playername">Add Player</button>
  <br>
  <br>
  <input type="submit" value="Submit" />
</form>

Blackrose 07 дек. 2017, в 07:56

Источник

Теги:

javascript

local-storage

2 ответа

Ещё вопросы

rameshgrg · Answer 1 · 2017-12-07T06-11-00.000Z

Возьмите игру и игроков, используя селектор jquery в форме submit, запретив использование формы с помощью jquery
Подготовьте объект для игры и игроков
Преобразование объекта в строку, используя JSON.stringify(your_data_object) функцию

Сохранить в LocalStorage используя ( "ключ", "значение") localStorage.setItem функции

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

Usha Prasanna · Answer 2 · 2017-12-07T07-07-00.000Z

поздно ответить, но что-то вроде этого

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