HTML5 localStorage: мой код соответствует правильным стандартам?

Question

ОК, поэтому я создал HTML5-игру на холсте, которая использует localStorage. У меня 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/

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 вероятно все в порядке, однако я думаю, что в более сложном приложении было бы неплохо обернуть localStorage и предоставить API с методами get и set, подходящими для конкретного приложения (например, get / setMySpecialObject и get / setMySpecialValue).

Я не думаю, что приложение должно заботиться о том, где хранятся данные, оно просто должно вызвать API, чтобы получить или установить его. Код API определяет, как его хранить и где его получить. Как правило, наиболее эффективно читать и записывать данные в объект и читать / записывать в localStorage за кулисами. Получите данные из localStorage при первом запросе и кэшируйте их. Если он обновляется по пути, напишите обратно в localStorage , в зависимости от обстоятельств, для этого не нужно запрашивать команды из приложения.

Answer 3

Я не думаю, что нотация доступа к массиву для localStorage является частью стандарта, но большинство браузеров, которые реализуют, вероятно, допускают такую ​​возможность.Если вы хотите быть особенно осторожным, то используйте getItem и setItem - но лично я не предвижу, что это проблема.

Mozilla говорит:

Хотя значения можно устанавливать и считывать с помощью стандартного метода доступа к свойству JavaScript, рекомендуется использовать методы getItem и setItem.

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

Даже в примерахв этом проекте они используют обозначение доступа к свойству, так что я думаю, что вы в порядке.