Question

好的，所以我创建了一个使用localStorage的HTML5画布游戏。我有本地存储工作完美，但我不确定它是否遵循正确的标准，或者它是否完全按照我编写的方式。

//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的方式吗？

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

Answer 1

它有效，并且可能不会中断，但在使用localStorage时我仍然会尝试使用正确的类型。 getItem和setItem是首选方式，但跳出来的是你获取和设置值的方法不适用于任何类型而是数字，这意味着如果你使用了很多localStorage，你必须谨慎编码。

您正在向localStorage发送一个号码，并将其转换为字符串。在处理布尔值时，这会让你遇到很多麻烦，例如：

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);

Answer 2

我不认为localStorage的数组访问符号是标准的一部分，但实现的大多数浏览器可能会允许这种可能性。如果您想特别小心，请使用getItem和setItem - 但就个人而言，我不认为这是一个问题。

Mozilla说：

虽然可以通过标准JavaScript属性访问方法设置和读取值，但建议使用getItem和setItem方法。

http://dev.w3.org/html5/webstorage/#storage-0

即使是草案中的示例，他们也使用属性访问表示法，所以我认为你没事。

Answer 3

对于小型应用程序，直接读取和写入 localStorage 是可以的，但我认为在更复杂的应用程序中包装 localStorage 和提供适用于特定应用程序的get和set方法的API（例如get / setMySpecialObject和get / setMySpecialValue）。

我不认为应用程序应该关心数据存储的位置，它应该只调用API来获取或设置数据。 API背后的代码解决了如何存储它以及从何处获取它。通常，在后台读取和写入数据以及在后台读取/写入 localStorage 是最有效的。在第一次请求时从 localStorage 获取数据并对其进行缓存。如果它在此过程中更新，请根据需要回写 localStorage ，它不应要求应用程序执行此操作的命令。

HTML5 localStorage：我的代码是否遵循正确的标准？

3 个答案: