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

【问题标题】：JavaScript Conflict with Canvas font element and Local Storage displayJavaScript 与 Canvas 字体元素和本地存储显示冲突
【发布时间】：2014-03-12 21:47:47
【问题描述】：

我有一个与 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 标签，用于显示倒数计时器和当前分数。上面的列表工作正常，但问题是当列表为空时，页面顶部标题的画布元素消失，当列表填充一个或多个值（st）时，画布元素重新出现并正常显示.所有其他 div 元素显示正常。

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

TypeError: storedEntries is null

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

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

【问题讨论】：

标签： javascript canvas

【解决方案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 初始化为[]。

【讨论】：

NaN 也是假的 :)
完美！这很好用。非常感谢您的解释。