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

发布于 2024-11-15 08:36:37 字数 766 浏览 7 评论 0原文

好的，我创建了一个使用 localStorage 的 HTML5 画布游戏。我的 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 的方式吗？

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

原文

OK, so I have created an HTML5 canvas game that uses localStorage. I have localStorage working perfectly but I'm not sure that it follows the correct standards, or if it is completely fine the way that I have written it.

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

This works perfectly!? But from what I have read, i should be using localStorage.getItem and localStorage.setItem?

Should I change the way I write localStorage??

This is just the link to the website where I learned this way to access localStorage
http://hacks.mozilla.org/2009/06/localstorage/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伪心 2024-11-22 08:36:37

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

您将一个数字发送到 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);

It works, and it probably won't break, but I'd still try to cast things in the correct type when using localStorage. getItem and setItem are the preferred ways of doing things, but the thing that jumped out at me was that your methods of getting and setting the value won't work for any type but a number, which means you have to code cautiously if you're using a lot of localStorage.

You're sending a number to localStorage, where it's converted to a string. This can get you into a lot of trouble when dealing with booleans, for example:

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

Arrays and objects get ugly too:

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

In other words, what you have works, but it's a good habit to do things correctly and consistently from the start, as it will simplify debugging later. The correct way -- which works with strings, numbers, arrays, objects -- is this:

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

回复收藏 0 原文

唯憾梦倾城 2024-11-22 08:36:37

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

Mozilla 说：

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

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

即使该草案中的示例也使用属性访问符号，所以我认为你没问题。

回复收藏 0 原文

小镇女孩 2024-11-22 08:36:37

对于小型应用程序，直接读取和写入 localStorage 可能没问题，但我认为在更复杂的应用程序中，包装 localStorage 并提供 API 是个好主意具有适合特定应用程序的 get 和 set 方法（例如 get/setMySpecialObject 和 get/setMySpecialValue）。

我认为应用程序不应该关心数据存储在哪里，它应该只调用 API 来获取或设置数据。 API 背后的代码决定了如何存储它以及从哪里获取它。一般来说，在对象中读取和写入数据以及在后台读取/写入本地存储是最有效的。第一次请求时从 localStorage 获取数据并缓存。如果一路上更新了，请根据需要写回到localStorage，它不需要应用程序的命令来执行此操作。