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个数组项。抱歉，该代码段无法正常运行，显然不支持localStorage？

Answer 1

您已将JSON正确存储在localStorage中，但在检索它时还需要将parse()退回：

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

Working example

Answer 2

遍历JSON时，您需要再次解析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 3

如果您使用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>

从localStorage在阵列上运行循环

3 个答案: