Блог

Главная - Вопросы по программированию - Данные из локального хранилища, добавляемые в HTML

Данные из локального хранилища, добавляемые в HTML

#javascript #jquery

Вопрос:

Мое локальное хранилище теперь работает нормально: оно хранит данные на одном ключе.

Однако, когда я пытаюсь добавить данные в HTML, я получаю этот вывод при добавлении. Пожалуйста, посмотрите на изображение ниже.

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

https://jsfiddle.net/ricobenviaje11/rp8kqtd9/12/

 $("document").ready(function(){
  var iDataHandler = [];
  
    $(".save").on("click", function() {
        if(typeof(Storage) !== "undefined") {
          if(localStorage.getItem('iDataHandler') amp;amp; localStorage.getItem('iDataHandler').length > 0)
            iDataHandler = JSON.parse(localStorage.getItem('iDataHandler'));
          DataHandler = {
            'title': $("#txtbox-1").val(),
            'para': $("#txtbox-2").val(),
            'para1': $("#txtbox-3").val(),
          };
          
          iDataHandler.push(DataHandler);
          localStorage.setItem('iDataHandler', JSON.stringify(iDataHandler));
        }
      // appending data
          for (var i = 0; i < Object.keys(iDataHandler).length; i  ) {
          Object.keys(iDataHandler)[i]
          $('.sNote').append(
              '<div class="list-item" data-postid"' Object.keys(iDataHandler)[i] '">' iDataHandler[(Object.keys(iDataHandler)[i])] 
              '</div><div class="close"><i class="fas fa-times"></i></div>'
            );
          }      
        
    });
  
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="" id="txtbox-1">
<input type="text" name="" id="txtbox-2">
<input type="text" name="" id="txtbox-3">
<div class="save">
Save
</div>


<div class="sNote"></div>

введите описание изображения здесь

Комментарии:

1. С localStorage все в порядке, у вас есть ошибка при установке данных iDataHandler в html-элемент

2. Сначала вы должны упорядочить объект JSON.stringify(iDataHandler[(Object.keys(iDataHandler)[i])])

3. Спасибо, Витальность, ты можешь показать мне, как это сделать? Я думаю, что моя ошибка заключается в добавлении. Моя цель также состоит в том, чтобы, когда я ввожу на входы, они должны быть разделены, например, input1: Имя input2: Среднее имя input3: Фамилия это должно выглядеть так в HTML <div класс=»имя-c»> <div класс=»имя-c»><div класс=»имя»>Имя<div класс=»имя»></div> </div><div класс=»средний»>Средний<div класс=»средний»></div> <div><div класс=»фамилия»>Фамилия<div класс=»фамилия»></div> </div></div>

4. Привет, Виталий, куда мне это положить? JSON.stringify(iDataHandler[(Объект.ключи(iDataHandler)[i])])

Ответ №1:

Вы должны поместить это туда, куда вы добавляете данные list-item 

 // appending data
           for (var i = 0; i < Object.keys(iDataHandler).length; i  ) {
                  $('.sNote').append(
                      '<div class="list-item" data-postid"' JSON.stringify(iDataHandler[(Object.keys(iDataHandler)[i])]) 
                      '</div><div class="close"><i class="fas fa-times"></i></div>'
                    );
            }

Комментарии:

1. Спасибо, Виталий, теперь это работает, я могу видеть данные в строке, также могу я спросить, как я могу добавить их к чему-то подобному? Пример ввода 1: Имя ввод2: Среднее имя ввод3: Фамилия это должно выглядеть так в HTML <div класс=»имя-c»> <div класс=»имя-c»><div класс=»имя»>Имя<div класс=»имя»></div> </div><div класс=»средний»>Средний<div класс=»средний»></div> <div класс=»фамилия»>Фамилия<div класс=»фамилия»></div></div> </div>

2. Смотрите демонстрацию jsfiddle.net/asv7gbce

3. Проверить jsfiddle.net/mw1Lx2he/2

4. мой совет-переписать все без использования jquery, попробуйте это с помощью reactjs или vuejs

5. Да, чистый JS, в будущем это будет полезно для вас

Метки: ,