Localstorage - rewrite from JS to Jquery-CodePudding

I'm working on a portfolio project - which should use jquery - part of the task is to set and get text via localstorage - which I can do in Javascript but I breaks when attempting to refactor in jquery.

I found an elegantly simple javascript codepen, which has all the features I want. But when I refactor into jquery it loses funtionality - I can't save the text to local storage (I get null) and I can't copy the text to a different Div.

This is the HTML:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Local Test</title>
  </head>

  <body>
    <div ></div>
    <textarea  placeholder="Your text here"></textarea>
    <button >Save</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="./script.js"></script>
  </body>

</html>

This is simple CSS from the JS code pen:

* {
  font-size: 16px;
  font-family: sans-serif;
}

body {
  padding: 1rem;
  font-family: sans-serif;
}

.content-output {
  float: left;
  box-sizing: border-box;
  background: #f9f9f9;
  padding: 0.5rem;
  width: calc(50% - 1rem);
  height: 10rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: #202020;
}

.content-input {
  float: left;
  box-sizing: border-box;
  margin-left: 2rem;
  padding: 0.5rem;
  width: calc(50% - 1rem);
  height: 10rem;
  border: 1px solid #505050;
  resize: none;
}

.save-button {
  /* -webkit-appearance: none; */
  border: 0;
  background: #0088ff;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  color: #fff;
  margin-top: 1rem;
  float: right;
  cursor: pointer;
}

Here is the JS which works:

var input_textarea = document.querySelector(".content-input");
var output_div = document.querySelector(".content-output");
var save_button = document.querySelector(".save-button");

save_button.addEventListener("click", updateOutput);

output = localStorage.getItem("content");
input = localStorage.getItem("content");
console.log(output);
output_div.textContent = output;

function updateOutput() {
    console.log("clicked button");
    localStorage.setItem("content", input_textarea.value);

    output_div.textContent = input_textarea.value;
}

And here is the jquery which doesn't work:

var input_textarea = $(".content-input");
var output_div = $(".content-output");
var save_button = $(".save-button");

save_button.on("click", updateOutput);

output_div.textContent = localStorage.getItem("content");
input_textarea.value = localStorage.getItem(("content"));

function updateOutput(event) {
    event.preventDefault();
    localStorage.setItem("content", input_textarea.value);


    output_div.textContent = input_textarea.value;
}

I'm running out of ideas and searches - probably a typo but I cant find it . I've tried text() which was the advice 6 years ago. JSON.stringify and parse don't help because it's just a string. I'm hoping someone has done some refactoring and spots the differences - I've even run this in the console but I can only add the text to localstorage manually: localstorage.setItem('content', 'help')

Thanks in advance

CodePudding user response：

The problem is that you are trying to select a array, get the value of that array, and output to another array. I think jquery does that when you select a class, (because there could be more than one of them). Simple solution to this..

var input_textarea = $(".content-input")[0];
        console.log(input_textarea)
        var output_div = $(".content-output")[0];
        var save_button = $(".save-button");

        save_button.on("click", updateOutput);

        output_div.textContent = localStorage.getItem("content");
        input_textarea.value = localStorage.getItem(("content"));

        function updateOutput(event) {
            console.log('hello')
            event.preventDefault();
            localStorage.setItem("content", input_textarea.value);


            output_div.textContent = input_textarea.value;
        }

CodePudding user response：

Found it: val() to set and text() to get.

var input_textarea = $(".content-input");
var output_div = $(".content-output");
var save_button = $(".save-button");

save_button.on("click", updateOutput);


// input_textarea.value = localStorage.getItem(("content"));

function updateOutput(event) {
    event.preventDefault();
    localStorage.setItem("content", input_textarea.val());
    output_div.text(localStorage.getItem("content"));
}

this post helped: How to save the value of textarea to localstorage then display it in the same textarea