HTML5 localStorage：我的代碼是否遵循正確的標準？

好的，我創建了一個使用localStorage的HTML5 canvas遊戲。我有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/

來源

2011-06-15 Jacob

不，我知道，但從網上已經有的「外面」，我應該跟着別人做什麼？（指getItem，setItem） – Jacob 2011-06-15 00:23:52

這可能會有所幫助 - 關於setitem，getitem的好回答http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage – mrk 2011-06-15 00:28:45

它的作品，它可能不會中斷，但我仍然嘗試使用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);

來源

2011-06-15 00:27:05 brymck

感謝您的幫助！我真的在向localStorage發送一個數字，然後檢索字符串並使用Number（）將字符串轉換爲數字，以便使用timesPlayed + = 1 – Jacob 2011-06-15 13:30:02

來增加它。所以，我不必使用Number（）和我仍然可以使用localStorage發送和檢索字符串，並使用我設置的方式。但無論如何，我將切換到getItem和setItem。 – Jacob 2011-06-15 13:37:21

@Jacob，是的，你的工作方式。我不是說別的。但是使用'JSON.parse'和'JSON.stringify'方法的好處是，無論如何，它們都會從localStorage中返回正確的類型。如果你在localStorage中存儲了一件事情，這不是什麼大問題，但如果你一個月後回來並想重構代碼會發生什麼？你必須記住你已經存儲了什麼字符串，什麼是數字，什麼是布爾值。最好把這個問題扼殺在萌芽狀態。（我這樣說是因爲我做了一個擴展名而遇到了這個問題。） – brymck 2011-06-15 13:42:34

我不認爲對localStorage數組訪問符號是標準的一部分，但大多數瀏覽器實現可能會考慮到這種可能性。如果您想特別小心，請使用getItem和setItem - 但我個人並不認爲這是一個問題。

Mozilla說：

雖然值可以設置並通過的getItem和setItem方法的標準JavaScript屬性訪問方法使用讀取建議。

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

即使在他們所使用的屬性訪問記法草案中的例子，所以我覺得你行。

來源

2011-06-15 00:26:51

感謝您的幫助！我可以堅持下去，但我很可能會改變爲getItem和setItem。 – Jacob 2011-06-15 13:31:13

對於一個小的應用程序，直接讀取和寫入localStorage的是probaby OK，但我覺得更復雜的應用程序，這將是一個好主意，包裝localStorage並提供適用於特定應用程序（例如get/setMySpecialObject和get/setMySpecialValue）的get和set方法的API。

我不認爲應用程序應該關心數據存儲的位置，它應該調用一個API來獲取或設置它。 API背後的代碼演示瞭如何存儲它以及從哪裏獲取它。Genearlly最有效的方式是將數據讀寫到對象中，並在後臺讀寫localStorage。第一次請求並緩存它時，從localStorage獲取數據。如果一路更新，請根據需要回寫到localStorage，它不應該要求應用程序發出命令才能這樣做。

來源

2011-06-15 01:35:29 RobG

HTML5 localStorage：我的代碼是否遵循正確的標準？

回答

相關問題