Добавление объектов из LocalStorage на страницу

Question

У меня есть данные в LocalStorage, которые я должна разместить на странице. В LocalStorage данные добавляются при нажатии кнопки отправить. Сохраняются данные верно, но на странице не появляется. Заранее спасибо за каждую подсказку.

let array = {
  name: 'Alex',
  date: '10.08.2020',
  toString() {
    return `<div class='post>      
      Post #<span class="post_number">1</span>
      at <span class="post_datetime">${array.date}</span>
      being in: <span class="post_name">${array.name}</span>   
    </div> `
  }
};

$('button[type="submit"]').on('click', () => {
  localStorage.setItem('array', array);
  for (let i = 0; i < array.length; i++) {
    let newDiv = $('<div>');
    newDiv.appendTo('.posts').addClass('post').html(localStorage.getItem('array'));
  }
})
console.log(array)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>
<div class="posts"></div>
<button type="submit">submit</button>

Answer 1

Они сами по себе не появятся, вам нужно их оттуда достать при загрузке страницы.

$(document).ready(function() {
  let array = localStorage.getItem('array');
  //а тут ваш код
  for (let i = 0; i < array.length; i++) {
    let newDiv = $('<div>');
    newDiv.appendTo('.posts').addClass('post').html(array[i]);
    //или array[i].toString()
  }
})

И еще, лучше хранить в localStorage данные в JSON, т.е. в setItem передавать JSON.stringify(array), а c getItem - JSON.parse(localStorage.getItem(array))

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
    $('button#addToLocalStorage[type="submit"]').on('click', () => {
      let array = [{
          name: 'Alex',
          date: '10.08.2020',
        }];
        localStorage.setItem('array',JSON.stringify(array));
    });
    $('button#showPosts[type="submit"]').on('click', () => {
      let array = JSON.parse(localStorage.getItem('array'));
      for (let i = 0; i < array.length; i++) {
        let newDiv = $('<div>');
        newDiv.appendTo('.posts').addClass('post').html(
            '<div class="post">'+
            'Post #<span class="post_number">1</span>'+
            ' at <span class="post_datetime">'+array[i].date+'</span>'+
            ' being in: <span class="post_name">'+array[i].name+'</span>'+
            '</div>'
        );
      }
    });
});
</script>
<div class="container"></div>
<div class="posts"></div>
<button type="submit" id="showPosts">submit</button>
<button type="submit" id="addToLocalStorage">Add Data</button>

Вот так точно будет работать. Значит в чем именно проблема, у вас array - это объект, а не массив, соответственно чтобы его перебирать в for - это должен быть массив - [], из объектов. Во-вторых - в объекте у вас метод toString - после загрузки из localStorage работать не будет, поэтому лучше, либо создать класс, и приводить объект к классу, в котором будет метод toString с подобной логикой, ну, либо сделать по-простому, как в примере.

p.s. сначала жмете Add Data чтобы данные появились в localStorage, потом submit, чтобы они подгружались на страницу.

БЛОГ НА HUSL

Добавление объектов из LocalStorage на страницу

Ответы (2 шт):