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/

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

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

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

您将一个数字发送到 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);
唯憾梦倾城 2024-11-22 08:36:37

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

Mozilla 说:

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

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

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

I don't think the array access notation for localStorage is part of the standard, but most browsers that implement will probably allow for that possibility. If you want to be especially careful, then use getItem and setItem - but personally, I don't foresee this being a problem.

Mozilla says:

Although the values can be set and read via the standard JavaScript property access method usage of getItem and setItem methods is recommended.

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

Even the examples in that draft they use the property access notation, so I think you're OK.

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

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

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

For a small application, direct reading and writing to localStorage is probaby OK, however I think in a more complex application it would be a good idea to wrap localStorage and provide an API with get and set methods suitable for the particular application (e.g. get/setMySpecialObject and get/setMySpecialValue).

I don't think an application should care about where data is stored, it should just call an API to get or set it. The code behind the API works out how to store it and where to get it from. Genearlly it's most efficient to read and write data into an object and read/write to localStorage behind the scenes. Get data from localStorage the first time it is requested and cache it. If it's updated along the way, write back to localStorage as appropriate, it should not require commands from the application to do so.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文