javascript - LocalStorage 中实际值之前的 "undefined"

Question

这是我使用的代码:

localStorage["FSS"] += JSON.stringify(favSongs);
localStorage["FSTS"] += JSON.stringify(favSongTitle);
localStorage["FIS"] += JSON.stringify(favImages);

但是当我检索值时，我得到:

对于FSS:未定义[“0t0FGyhB6C8”]

对于FSTS:未定义[“SONIC SYNDICATE - 被拒绝(官方音乐视频)”]

对于FIS:未定义["https://i.ytimg.com/vi/0t0FGyhB6C8/mqdefault.jpg"]

我不明白 undefined 是如何以及从何而来的，以及如何删除它以在屏幕上记录结果(现在当我记录它时，它显示 undefined以及)。

Answer 1

未定义是localStorage中已有的内容:

document.getElementById('existing').textContent = localStorage[Math.random().toString()];

因为您使用 foo += bar 语法，所以脚本将:

1. 获取foo的现有值
2. 执行类型强制以使 foo 和 bar 兼容
3. 将 bar 附加到现有值
4. 将组合值赋回 foo

如果foo已经包含undefined...

这似乎是通过 map 访问器访问 localStorage 属性的产物。如果您使用the getItem method ，您将收到 null 而不是 undefined。

由于您使用的是 JSON，因此即使您已经有一个值，简单的字符串连接(字符串 +=)也将不起作用。您最终会得到 ['foo-album']['bar-album']，这是无效的。我建议获取现有项目或一个空数组，附加新项目，然后替换存储的值:

var prev = localStorage.getItem('FSS') || '[]'; // get the existing value or the string representing an empty array
var data = JSON.parse(prev); // parse into an object
data.push('New Album');
localStorage.setItem('FSS', JSON.stringify(data)); // convert back to JSON and set