JavaScript 与 Canvas 字体元素和本地存储显示冲突

Question

我有一个与 windows onload 一起运行的函数，用于显示存储在本地存储中的分数列表。即使列表为空，它也会像在新浏览器中加载时一样显示。

function scoresListDisplay(){
storedEntries = [];
storedEntries = JSON.parse(localStorage.getItem("localstoragekey"));
highScoreList = game.querySelector("section#game ol.high-scores"); 
 for(var i = 0; i < 10; i++){
  var st = storedEntries[i];                                   
  gamescorelist = document.createElement('li');
  gamescorelist.innerHTML = (typeof(st) != "undefined" ? st : "--" );
  highScoreList.appendChild(gamescorelist);
 }        
}

我还有其他 div 标签，例如包含页面标题或标题字体的 canvas 标签，以及其他用于显示倒数计时器和当前分数的 div 标签。上面的列表工作正常，但问题是当列表为空时，页面顶部带有标题的 canvas 元素消失，当列表由一个或多个值 (st) 填充时，canvas 元素重新出现并正常显示.所有其他 div 元素都显示正常。

我不确定，但我认为问题可能与 getItem 返回有关。尽管控制台报告了这一点:

TypeError: storedEntries is null

我是否遗漏了函数中的某些内容？

如果有人可以提供帮助，我将不胜感激。

Answer 1

嗯，你看...

storedEntries = [];
storedEntries = JSON.parse(localStorage.getItem("localstoragekey"));

您正在重新定义 storedEntries，所以第一行没有用。当 localStorage 为空时，JSON.parse 将返回 null，稍后您可以像访问数组一样访问它。

这样做:

storedEntries = JSON.parse(localStorage.getItem("localstoragekey")) || [];

这意味着，获取 JSON.parse 的值，如果它不是 null，则 0， NaN、undefined、false 或 '' 用它初始化 storedEntries；否则，使用 [] 初始化 storedEntries。