Чи є localStorage.getItem ('item') кращим від localStorage.item або localStorage ['item']?

Question 1

Нещодавно я задав питання про 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'] АБО, якщо вони працюють, стислі позначення в порядку?

Question 2

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

Підтримувані імена властивостей об’єкта сховища - це ключі кожної пари ключ / значення, що в даний час присутні у списку, пов’язаному з об’єктом, у тому порядку, коли ключі були останніми додані до області зберігання.

Вони просто поводяться по-різному, коли не знайдено пари ключ / значення із запитаним іменем. Наприклад, якщо ключ 'item'не існує, var a = localStorage.item;це призведе до aіснування undefined, тоді як var a = localStorage.getItem('item');призведе aдо значення null. Як ви виявили, undefinedі nullне є взаємозамінними в JavaScript / EcmaScript. :)

EDIT: Як зазначає Крістоф у своїй відповіді , функціональний інтерфейс - це єдиний спосіб надійно зберігати та отримувати значення під ключами, що дорівнюють заданим властивостям 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можна знайти тут .}

Question 3

Питання вже досить давнє, але оскільки мене цитували у цьому запитанні, я думаю, що слід сказати два слова щодо мого висловлювання.

Об'єкт зберігання досить особливий, це об'єкт, який забезпечує доступ до списку пар ключ / значення. Таким чином, це не звичайний об'єкт або масив.

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

За допомогою масиву ви можете зробити:

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

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

Question 4

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

Ось мої тести на JsPerf

Question 5

Як уже зазначалося, різниці майже немає, за винятком неіснуючого ключа. Різниця в продуктивності варіюється в залежності від того, який браузер / ОС ви використовуєте. Але насправді це не так інакше.

Я пропоную вам використовувати стандартний інтерфейс, лише тому, що це рекомендований спосіб його використання.