LocalStorage.getItem ('item') лучше, чем localStorage.item или localStorage ['item']?

Недавно я задал вопрос о LocalStorage . Использование JSON.parse(localStorage.item)и JSON.parse(localStorage['item'])не работали, чтобы вернуться, NULLкогда элемент еще не был установлен.

Однако JSON.parse(localStorage.getItem('item')сработало. И, оказывается, JSON.parse(localStorage.testObject || null)тоже работает.

Один из комментариев в основном говорят , что localStorage.getItem()и localStorage.setItem()всегда следует отдавать предпочтение:

Геттер и сеттер обеспечивают согласованный, стандартизованный и кроссбраузерный способ работы с LS api и всегда должны быть предпочтительнее других способов. - Кристоф

Мне нравится использовать сокращенные обозначения точек и скобок для localStorage, но мне любопытно узнать, как другие относятся к этому. Является ли localStorage.getItem ('item') лучше, чем localStorage.item или localStorage ['item'], ИЛИ пока они работают, допустимы сокращенные обозначения?

И прямой доступ к свойствам ( localStorage.itemили localStorage['item']), и использование функционального интерфейса ( localStorage.getItem('item')) работают нормально. Оба являются стандартными и совместимы с несколькими браузерами. ^* Согласно спецификации :

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

Просто они ведут себя по-другому, когда не найдено пары ключ / значение с запрошенным именем. Например, если ключ 'item'не существует, var a = localStorage.item;будет aиметь значение undefined, а значение var a = localStorage.getItem('item');будет aиметь значение null. Как вы обнаружили, undefinedи nullне являются взаимозаменяемыми в JavaScript / ECMAScript. :)

РЕДАКТИРОВАТЬ: Как указывает Кристоф в своем ответе , функциональный интерфейс - это единственный способ надежно хранить и извлекать значения под ключами, равными предопределенным свойствам localStorage. (Есть шесть из них: length, key, setItem, getItem, removeItem, и clear.) Так, например, следующий будет всегда работа:

localStorage.setItem('length', 2);
console.log(localStorage.getItem('length'));

Обратите внимание, в частности, что первый оператор не повлияет на свойство localStorage.length(за исключением, возможно, увеличения его, если ключ 'length'уже не был вlocalStorage ). В этом отношении спецификация кажется внутренне противоречивой.

Однако следующее, вероятно, не даст того, что вы хотите:

localStorage.length = 2;
console.log(localStorage.length);

Интересно, что первый из них не работает в Chrome, но является синонимом функционального вызова в Firefox. Второй всегда будет записывать количество ключей, присутствующих вlocalStorage .

^* _{Это верно для браузеров, которые в первую очередь поддерживают веб-хранилище. (Сюда входят почти все современные настольные и мобильные браузеры.) Для сред, имитирующих локальное хранилище с помощью файлов cookie или других методов, поведение зависит от используемой прокладки. Несколько polyfills для localStorageмогут быть найдены здесь .}

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

Объект хранилища довольно особенный, это объект, который предоставляет доступ к списку пар ключ / значение. Таким образом, это не обычный объект или массив.

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

С массивом вы можете:

var a = [1,2,3,4];
a.length // => 4
a.length = 2;
a // => [1,2]

Здесь у нас есть первая причина использовать геттеры / сеттеры. Что делать, если вы хотите установить элемент с именем length?

localStorage.length = "foo";
localStorage.length  // => 0
localStorage.setItem("length","foo");
// the "length" key is now only accessable via the getter method:
localStorage.length  // => 1
localStorage.getItem("length") // => "foo"

С другими членами объекта Storage это еще более критично, поскольку они доступны для записи, и вы можете случайно перезаписать такие методы, как getItem . Использование методов API предотвращает любые из этих возможных проблем и обеспечивает согласованный интерфейс.

Также интересным моментом является следующий абзац в спецификации (выделенный мной):

Методы setItem () и removeItem () должны быть атомарными в отношении сбоя. В случае неудачи метод ничего не делает. То есть изменения в области хранения данных должны быть либо успешными, либо область хранения данных не должна изменяться вообще.

Теоретически не должно быть разницы между геттерами / сеттерами и []доступом, но мало ли ...

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

Вот мои тесты на JsPerf

Как уже было сказано, разницы почти нет, кроме несуществующего ключа. Разница в производительности варьируется в зависимости от того, какой браузер / ОС вы используете. Но на самом деле это не так уж и сложно.

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