CODEWITHSUNDEEP
javascripthtmljquerycss
CoreTM
CoreTM

Reputation: 305

How to store and re-use local storage data using jQuery?

I am new to using local storage. Can anyone teach me how I can get the value I've placed in the textarea, and once I click the done button it will store in the .result class. Also once I've input again there's another it will store again in the .result class? Please anyone can help me with this?

$(".Done").on("click", function() {
  var test = $(".title").val();
  localStorage.setItem("title", test);
});
.result {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="title"></textarea>
<div class="Done">Done</div>

<div class="result"></div>

Upvotes: 0

Views: 396

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve your goal you need to do two things. Firstly set the text() of .result based on the value in the textarea when the button is clicked.

Secondly you need to check if the title is set in local storage when the page loads, and if it is, then set the value of .result with that content.

The logic would look like this:

let setResult = title => $('.result').text(title || '');

jQuery($ => {
  setResult(localStorage.getItem('title')); // set on load    

  $(".Done").on("click", function() {
    let title = $(".title").val();
    setResult(title); // set on click
    localStorage.setItem("title", title);
  });
});

Here's a working example in jsFiddle as the SO snippet editor is sandboxed and doesn't allow access to local storage.

Upvotes: 2

Related Questions