CODEWITHSUNDEEP
javascriptjquery
Willie
Willie

Reputation: 123

Saving into Local Storage with a Click Event

Hello stackoverflow: I am working on getting a click event save into local storage. However, I get that it is undefined as the answer. This is what I have so far as my click event:

 $(document).ready(function() {

    $(".btnlocalStorage").on("click", function() {
        event.preventDefault();
        console.log("I am clicked!")
       var myContent = $(this).(".btnlocalStorage").val();
       localStorage.setItem("myContent", myContent);
       //localStorage.setItem("myContent", JSON.stringify(myContent));
    })
    
})

This is the HTML part of it, a button and a text area:

 <textarea type="text" class="TextBoxColors-17 form-control" id="TextBoxStorage-17" aria-label="5:00 PM" aria-describedby="inputGroup-sizing-sm"></textarea>
            
   <button class="btn btn-primary btnlocalStorage" type="button" todo="saveToDo-11am"><i class="fa fa-floppy-o" style="font-size:18px;"></i>
   </button>

What should happen is that when I type any content into the text area, when I click the save button, this content should be saved into local storage. I am getting the key name, but the value/content undefined. Please, help me get this working. Thanks!

Upvotes: 0

Views: 2310

Answers (1)

Jimmy Dem&#233;autis
Jimmy Dem&#233;autis

Reputation: 26

You're trying to get the value of your button instead of the value of the textarea with:

$(this)

Your code should look like this :

$(document).ready(function(){
    $(".btnlocalStorage").on("click", function() {
        localStorage.setItem("myContent", $(".TextBoxColors-17").val());
        console.log(localStorage.getItem("myContent"));
    })
});

EDIT :

This code only works for one specific textarea, if you want to make it work for multiple textareas followed by a button, you must use :

$(this).prev()

"this" refers to the button wich triggered the event and the prev() function allow you to get the element just before it.

Be careful, your local storage item must have a different name from one button to another, otherwise all buttons will override the same item content, for the example I took the ID of your textarea but it can be any iterated variable :

$(document).ready(function(){
    $(".btnlocalStorage").on("click", function() {
        localStorage.setItem($(this).prop("id"), $(this).prev().val());
        console.log(localStorage.getItem($(this).prop("id")));
    })
});

Upvotes: 1

Related Questions