Как добавить новые объекты в локальное хранилище в javascript?

Question

Привет! Мне нужна помощь для добавления новых объектов в локальное хранилище каждый раз, когда я, когда я заполняю форму и нажимаю на кнопку отправить, я хочу добавить новый элемент в локальное хранилище, возможно ли это? пожалуйста, совет и или помощь с моим кодом ниже. Спасибо за помощь. Каждый раз, когда я выбираю из выпадающего списка.

Моя выпадающая форма:

          <form asp-action="Create">
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ScheduleStartTime" class="control-label"></label>
                <input asp-for="ScheduleStartTime" class="form-control" id="scheduleStartTime" />
                <span asp-validation-for="ScheduleStartTime" class="text-danger"></span>
            </div>
    <select asp-for="CandidateID" class="form-control" id="candId">
                @{
                    if (candidates != null)
                    {
                        foreach (var cand in candidates)
                        {
                            <option value='@cand.ID'>@cand.DisplayName</option>
                        }
                    }
                }
            </select>

  <div class="form-group">

                <input onclick="addTheEvent(); return false;" type="submit" value="Add  " class="btn btn-primary" />

            </div>

        </form> 

вот мой код:

     <script>

    var addToTheContent = document.getElementById("canvas");
    var scheduleEvent = document.getElementById("scheduleStartTime");
    var candidateId = document.getElementById('candId');
    var getCandId = document.getElementById("candId");

     var displayCandId = getCandId.options[getCandId.selectedIndex].value;



  function addTheEvent() {



      var showText = addToTheContent.innerHTML = displayCandId + " ( " + scheduleEvent.value + " ) ";


      localStorage.setItem("key", showText)  
      localStorage.getItem("key");


  }




</script> 

Обновлено:

 function addTheEvent() {

    var showText = addToTheContent.innerHTML = displayCandId + " (" + scheduleEvent.value + ") ";

     //set value into local storage

     localStorage.setItem("key", JSON.stringify(showText));
    localStorage.getItem('key');

 // localStorage.getItem("key") // get value from localStorage
  window.location.href = "/"; 
  }

Answer 1

Чтобы сохранить ваш объект в localStorage, попробуйте это:

let user = {
    name: "Ivan",
    surname: "Petrov"
}

//save data
localStorage.setItem('user', JSON.stringify(user))

//get data
let user = JSON.parse(localStorage.getItem('user'))

Answer 2

Марк Минеров ответил правильно

Я просто хочу добавить ответ. Если вы хотите добавить новое значение вместо того, чтобы перезаписывать его каждый раз, когда нажимаете кнопку, тогда вам следует использовать динамический ключ c при вызове localStorage.setItem ()

    <script>

        var addToTheContent = document.getElementById("canvas");
        var scheduleEvent = document.getElementById("scheduleStartTime");
        var candidateId = document.getElementById('candId');
        var getCandId = document.getElementById("candId");

        var displayCandId = getCandId.options[getCandId.selectedIndex].value;

        var id = 1;

        function addTheEvent() {

          var showText = addToTheContent.innerHTML = displayCandId + " ( " + scheduleEvent.value + " ) ";

          localStorage.setItem(`key${id}`, JSON.stringify(showText))
          id += 1  
        }
</script> 

Answer 3

//here i add new value to the storage

const user = {
  name: "Mark",
  surname: "Minerov"
}

localStorage.setItem('key1', JSON.stringify(user))

//then i get the value
const result = localStorage.getItem('key1')

console.log(result)