Localstorage - 从 JS 重写为 Jquery

Question

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.我正在做一个投资组合项目——应该使用 jquery——部分任务是通过本地存储设置和获取文本——我可以在 Javascript 中完成，但在 jquery 中尝试重构时我中断了。

I found an elegantly simple javascript codepen, which has all the features I want.我找到了一个优雅简单的javascript codepen，它具有我想要的所有功能。 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.但是，当我重构为 jquery 时，它失去了功能——我无法将文本保存到本地存储（我得到 null），也无法将文本复制到不同的 Div。

This is the HTML:这是 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 class="content-output"></div>
    <textarea class="content-input" placeholder="Your text here"></textarea>
    <button class="save-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:这是来自JS代码笔的简单CSS：

* {
  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:这是有效的JS：

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:这是不起作用的 jquery：

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.我试过 text() 这是 6 年前的建议。 JSON.stringify and parse don't help because it's just a string. JSON.stringify 和 parse 没有帮助，因为它只是一个字符串。 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')我希望有人做了一些重构并发现了差异——我什至在控制台中运行了它，但我只能手动将文本添加到 localstorage：localstorage.setItem('content', 'help')

Thanks in advance提前致谢

Answer 1

The problem is that you are trying to select a array, get the value of that array, and output to another array.问题是您正在尝试 select 一个数组，获取该数组的值，然后 output 到另一个数组。 I think jquery does that when you select a class, (because there could be more than one of them).我认为 jquery 会在您 select 和 class 时执行此操作（因为它们可能不止一个）。 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;
        }

Answer 2

Found it: val() to set and text() to get.找到它：设置 val() 和获取 text()。

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这篇文章有帮助： How to save the value of textarea to localstorage then display it in the same textarea

Localstorage - 从 JS 重写为 Jquery

问题描述

2 个解决方案

解决方案1
0 已采纳 2023-01-21 21:03:30

解决方案2
0 2023-01-21 21:43:05

Localstorage - 从 JS 重写为 Jquery

问题描述

2 个解决方案

解决方案1 0 已采纳 2023-01-21 21:03:30

解决方案2 0 2023-01-21 21:43:05

解决方案1
0 已采纳 2023-01-21 21:03:30

解决方案2
0 2023-01-21 21:43:05