Запуск цикла в массиве из localStorage

Question

Я создаю и храню массив в localStorage, и я хотел бы использовать цикл for для разбора массива на отдельные divs внутри контейнера. Вот что у меня есть:

var arr = ['item 1', 'item 2', 'item 3'];
window.localStorage.setItem('myArr', JSON.stringify(arr));

function populateContainer() {
  var newArr = window.localStorage.getItem('myArr');
  $('.container').html('');
  
  for (var i = 0, len = newArr.length; i < len; i++) {
    $('.container').append('<div>' + newArr[i] + '</div>');
  }
}
populateContainer();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

К сожалению, для этого создается отдельный div для каждого отдельного символа элементов массива, поэтому я получаю 18 divs с одним символом каждый вместо 3 divs с 3 элементами массива. Извините, фрагмент не работает, очевидно, SO не поддерживает localStorage?

Answer 1

Вам нужно снова проанализировать JSON при циклическом просмотре, так как вы сохранили массив в виде строки:

var arr = ['item 1', 'item 2', 'item 3'];
window.localStorage.setItem('myArr', JSON.stringify(arr));

function populateContainer() {
  var arr = JSON.parse(window.localStorage.getItem('myArr'));
  $('.container').html('');

  for (var i = 0, len = arr.length; i < len; i++) {
    $('.container').append('<div>' + arr[i] + '</div>');
  }
}
populateContainer();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

JSFiddle, так как здесь не работает localStorage: https://jsfiddle.net/45h3fn0a/1/

Answer 2

Если вы используете JSON.stringify() для хранения ваших данных, вам придется использовать JSON.parse(), чтобы вернуть их обратно в массив следующим образом:

---

var arr = ['item 1', 'item 2', 'item 3'];
window.localStorage.setItem('myArr', JSON.stringify(arr));

function populateContainer() {
  var newArr = JSON.parse(window.localStorage.getItem('myArr'));
  $('.container').html('');
  
  for (var i = 0, len = newArr.length; i < len; i++) {
    $('.container').append('<div>' + newArr[i] + '</div>');
  }
}
populateContainer();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Answer 3

Вы сохраняете JSON в localStorage правильно, но вам также нужно parse() вернуть его при извлечении:

var arr = JSON.parse(window.localStorage.getItem('myArr'));

Рабочий пример