Является ли 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() всегда должно быть предпочтительным:

  

Метод получения и установки обеспечивает согласованное, стандартизированное и   совместимый с crossbrowser способ работы с API api и должен всегда   быть предпочтительным по сравнению с другими способами. - Кристоф

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

67 голосов | спросил Mark Rummel 28 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 28 Sep 2012 05:38:08 +0400 2012, 05:38:08

4 ответа


0

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

  

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

Они просто ведут себя по-разному, когда не найдено пары ключ /значение с запрошенным именем. Например, если ключ '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 или других методов, поведение зависит от используемой прокладки. Несколько полизаполнений для localStorage можно найти здесь .

ответил Ted Hopp 15 MarpmFri, 15 Mar 2013 21:53:55 +04002013-03-15T21:53:55+04:0009 2013, 21:53:55
0

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

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

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

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

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 () должны быть атомарными в отношении сбоя. В случае сбоя метод ничего не делает. То есть изменения в области хранения данных должны быть либо успешными, либо область хранения данных не должна изменяться вообще.

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

ответил Christoph 23 J000000Wednesday14 2014, 11:59:15
0

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

Вот мои тесты в JsPerf

ответил Dave Mackintosh 9 J0000006Europe/Moscow 2013, 13:57:00
0

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

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

ответил Salvador Dali 23 MaramSun, 23 Mar 2014 09:45:14 +04002014-03-23T09:45:14+04:0009 2014, 09:45:14

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132