CODEWITHSUNDEEP
javascriptlocal-storage
devArm
devArm

Reputation: 15

How to add new objects to local storage in javascript?

Hi I need some help to add new objects to local storage every time I when I fill out a form and click on submit, I want to add new item to local storage is it possible? please advice and or help with my code below. thanks for the help. Everytime when I select from a dropdown value.

My dropdown form:

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

here is my code: 

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

Updated:

 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 = "/"; 
  }

Upvotes: 0

Views: 1287

Answers (3)

cahyonobagus
cahyonobagus

Reputation: 1

Mark Minerov's answer is correct

I just want to add the answer. If you want to add new value instead of overwriting it every time you click your button, then you should use a dynamic key when you call 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>

Upvotes: 0

Mark Minerov
Mark Minerov

Reputation: 307

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

Upvotes: 0

Mark Minerov
Mark Minerov

Reputation: 307

To save your object in the localStorage try this:

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

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

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

Upvotes: 1

Related Questions