从 localStorage 在数组上运行 for 循环

Posted 2023-05-09

【中文标题】从 localStorage 在数组上运行 for 循环

【英文标题】：Running for loop on array from localStorage

【发布时间】：2018-12-05 10:25:15

【问题描述】：

我正在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 个数组项。抱歉sn-p 不工作，显然SO 不支持localStorage？

【问题讨论】：

你必须做 JSON.parse

【参考方案1】：

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

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

Working example

【参考方案2】：

你需要在循环遍历它时再次解析 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/

【参考方案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>