Как хранить и повторно использовать данные локального хранилища с помощью jQuery?

#javascript #html #jquery #css

Вопрос:

Я новичок в использовании локального хранилища. Может ли кто-нибудь научить меня, как я могу получить значение, которое я поместил в текстовую область, и как только я нажму кнопку готово, оно сохранится в .result классе. Кроме того, как только я снова введу данные, он снова сохранит их в .result классе? Пожалуйста, кто-нибудь может мне в этом помочь?

 $(".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>

1. Вы не можете напрямую получить доступ к значению текстового поля, выбрав его класс, так как он предоставит вам массив элементов. Выберите первый элемент (который, вероятно, является текстовым полем), затем получите значение. Это localStorage.setItem() правильный синтаксис

2. @РифатБинРеза You cannot directly access the value of the textbox by selecting it's class as it will give you an array of elements . Нет, этого не произойдет . У него есть только один элемент текстовой области с классом «заголовок». Это jquery, а не обычный javascript, где у вас есть getElementsByClassName -> я думаю, это то, о чем вы думали

3. @MihaiT Ты прав, я об этом не думал

Ответ №1:

Чтобы достичь своей цели, вам нужно сделать две вещи. Сначала установите значение на text() .result основе значения в поле textarea при нажатии кнопки.

Во-вторых, вам нужно проверить, установлено ли title значение в локальном хранилище при загрузке страницы, и если да, то установите значение .result с этим содержимым.

Логика выглядела бы так:

 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);
  });
});

Вот рабочий пример в jsFiddle, поскольку редактор фрагментов SO изолирован и не разрешает доступ к локальному хранилищу.