javascript - HTML5本地存储: Is my code following correct standards?

Question

好的，我已经创建了一个使用 localStorage 的 HTML5 Canvas 游戏。我的 localStorage 工作完美，但我不确定它是否遵循正确的标准，或者它是否完全按照我编写的方式工作。

//check if storage is set already, if not set the variable   
function checkLocalStorage(){  
if (localStorage.timesPlayed){  
timesPlayed = Number(localStorage.timesPlayed);  
}   
else{   
timesPlayed = 0;   
}   
}

//code snippet to increase my variable   
timesPlayed += 1;

//code snippet to set the localStorage   
localStorage.timesPlayed = timesPlayed;

这工作完美!？但从我读到的内容来看，我应该使用 localStorage.getItem 和 localStorage.setItem？

我应该改变本地存储的编写方式吗？

这只是我学习这种访问 localStorage 的方法的网站链接 http://hacks.mozilla.org/2009/06/localstorage/

Answer 1

它可以工作，而且可能不会损坏，但在使用 localStorage 时我仍然会尝试将内容转换为正确的类型。 getItem 和 setItem 是首选的处理方式，但让我惊讶的是，您获取和设置值的方法不适用于任何类型但是是一个数字，这意味着如果您使用大量本地存储，则必须谨慎编码。

您正在将一个数字发送到 localStorage，并在其中将其转换为字符串。在处理 bool 值时，这可能会给您带来很多麻烦，例如:

var won = false;
localStorage.isWinner = won;
if (localStorage.isWinner) { // always true
  alert("You won!");
}

数组和对象也变得丑陋:

localStorage.test = {foo: "bar", dog: "cat"};
// returns "[object Object]"

换句话说，你所拥有的东西是有效的，但从一开始就正确一致地做事是一个好习惯，因为它将简化以后的调试。正确的方法——适用于字符串、数字、数组、对象——是这样的:

localStorage.setItem("key", JSON.stringify(value));
JSON.parse(localStorage.getItem("key"));

// or as a de facto alternative

localStorage.key = JSON.stringify(value);
JSON.parse(localStorage.key);