从本地存储中检索数据对象并将它们重新加载到数组中答案

【问题标题】：Retrieving data objects from localstorage and reload them into array从本地存储中检索数据对象并将它们重新加载到数组中
【发布时间】：2021-01-27 23:39:28
【问题描述】：

在将数据传输到本地存储和从本地存储传输数据时，我已经从该站点获取了一些关键点。但是，它似乎无法正常工作。简而言之，我试图以包含对象的数组的形式将数据加载到本地存储和从本地存储加载。我知道它在本地存储中保存为字符串，然后使用 JSON 格式来解决该问题，这也是我认为当对象中有对象时问题可能出在的地方。但是，在当前状态下，它似乎不起作用。有什么想法吗？

var students = [{name: "Petrina", age: "20"}];
  function saveList(){
    localStorage.setItem('somekey', JSON.stringify(students));
    console.log("Saved to Local");
  }
  function loadList(){
    students = JSON.parse(localStorage.getItem('somekey'));
  }

代码没有错误，我正在使用与加载窗口相关的函数。

window.onload = () => { loadList() }

【问题讨论】：

“它似乎不起作用”......你能解释一下吗？什么不起作用？有错误吗？您如何使用loadList()？
它不加载或检索数据。没有错误。我在加载窗口时使用该功能。 -> window.onload = () => { loadList() }
key 是localStorage 的一个方法。不要使用它。例如，请改用 students。 Storage.key()
我把原来的键名改成了'key'作为例子。 :-) 它在原始代码中没有被命名为“key”，所以不应该是问题的根源。
注：不需要箭头功能 - 你可以使用window.onload = loadList;

标签： javascript html json string local-storage

【解决方案1】：

您已添加您从onload 拨打电话，并且，
在您的代码中，您正在加载到students。

添加到代码的开头：
var students;。

注意：有些对象需要特殊处理。
例如：Date:

var date = new Date();
localStorage.date = JSON.stringify(date);
date = new Date(JSON.parse(localStorage.date));

在附加信息之前回答：

key 是localStorage 的一个方法。
不要使用它。
例如，请改用students。
Storage.key()
（这是假设你调用函数）

var students = [{name: "Petrina", age: "20"}];
function saveToLocalStorage(key, value){
  localStorage.setItem(key, JSON.stringify(value));
  console.log("Saved to LocalStorage");
}
function loadFromLocalStorage(key){
  console.log("Loaded from LocalStorage");
  return JSON.parse(localStorage.getItem(key));
}
console.log("students: "+students);
saveToLocalStorage("stu", students);
var st2=loadFromLocalStorage("stu");
console.log("st2: "+st2);

无法在 sn-p 中运行：沙盒，无法访问 localStorage - 跨域。

【讨论】：

如前所述：“我将示例中的原始键名更改为'key'。:-) 在原始代码中未命名为'key'，因此不应该是源问题。”
根据您的更改更新，加上：onload 之前的全局students，加上：一些对象需要特殊处理，例如Date。

【解决方案2】：

解决了！ - 我不确定问题是什么。我清除了所有函数的所有调用，并在查看本地存储数据的同时一次调试了保存和加载函数 1。首先的问题是它根本没有保存在运行时更新的数据，因此它只是保持加载始终相同的值。 @iAmOren 通过创建一个返回值的函数的想法可能已经做到了，但是我不确定为什么。感谢您的回复和支持！

【讨论】：

我创建了一个函数，以便您可以重用代码。如果您直接设置students，它仍然可以工作 - 只要students 是在尝试访问它之前定义的全局变量。如果您不需要从“任何地方”访问students，那么 - 函数就是要走的路（在我看来）。

【解决方案3】：

您是否错过了对 saveList 函数的调用？

在调用 loadList 之前调用 saveList 可以正常工作。

请参考：https://codesandbox.io/s/strange-brown-3mmeq?file=/index.html

【讨论】：