如何遍历存储在本地存储 JavaScript 中的数组？答案

【问题标题】：How to iterate through an array stored in Local Storage JavaScript?如何遍历存储在本地存储 JavaScript 中的数组？
【发布时间】：2020-04-12 14:13:54
【问题描述】：

在此应用程序中，我以 HTML 形式从用户那里获取此信息：var orderName, trackingNumber, price 用户正在动态更新这些信息。然后我将它们存储在一个数组中，将其转换为 json 格式，并将 orderName 变量（用户之前提供的）作为本地存储键，

    var myArray = [];
    myArray.push(orderName, trackingNumber,price);

    var JsonOrder = JSON.stringify(myArray );
    localStorage.setItem(orderName,JsonOrder );

现在我想显示所有订单及其信息。一页列出了所有订单，orderName 应该是一个 HYPERLINK，可将用户带到仅包含该订单信息的页面。

这是我正在执行的遍历数组的操作：

 var savedOrders = JSON.parse(localStorage.getItem('orderName'));
 var orderName;
 var trackingNumber;
 var price;


 for (var key in savedOrders ) {

  orderName  = savedOrders[key][0];
  trackingNumber = savedOrders[key][1];
  price = savedOrders[key][2];


 }

这不起作用？

【问题讨论】：

.0 不是有效的语法。您需要改用括号符号[0]。
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
这能回答你的问题吗？ Loop through an array in JavaScript
Stack Overflow 上有很多很多关于如何在 Javascript 中迭代数组的问题。您尝试了哪些方法，为什么它们没有解决您的具体问题？
我试过 [0] 没有工作，它给了我一个“未定义”

标签： javascript local-storage

【解决方案1】：

简单地做


let JsonOrder = JSON.stringify( [orderName, trackingNumber, price] );
localStorage.setItem('someName',JsonOrder );

//---
let orderName, trackingNumber, price;
[orderName, trackingNumber, price] = JSON.parse(localStorage.getItem('someName'));

【讨论】：

你能解释一下这将如何工作的逻辑吗？
@ckaepie 解构任务？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我的意思是let JsonOrder = JSON.stringify( [orderName, trackingNumber, price] );这行是一个数组，我之前不需要声明它吗？
@ckaepie 它在 JSON.stringify 方法中创建一个临时数组，这与使用计算（或其他）作为任何函数的参数时相同，例如 myFunct( X + 7 ); ...跨度>

【解决方案2】：

我在这里找到了答案：


// Get the existing data
var existing = localStorage.getItem('myFavoriteSandwich');

// If no existing data, create an array
// Otherwise, convert the localStorage string to an array
existing = existing ? existing.split(',') : [];

// Add new data to localStorage Array
existing.push('tuna');

// Save back to localStorage
localStorage.setItem('myFavoriteSandwich', existing.toString());

来自https://gomakethings.com/how-to-update-localstorage-with-vanilla-javascript/

我认为有一个比使用 split 更好的方法，因为如果用户输入 [] 或 , 作为他们的输入怎么办？但到目前为止，这并不是一个好方法。

【讨论】：