¿Es localStorage.getItem ('item') mejor que localStorage.item o localStorage ['item']?

Recientemente hice una pregunta sobre LocalStorage . Usando JSON.parse(localStorage.item)y JSON.parse(localStorage['item'])no estaban funcionando para regresar NULLcuando el artículo aún no se había configurado.

Sin embargo, JSON.parse(localStorage.getItem('item')funcionó. Y resulta que JSON.parse(localStorage.testObject || null)también funciona.

Uno de los comentarios básicamente decía que localStorage.getItem()y localStorage.setItem()siempre debería preferirse:

El getter y setter proporcionan una forma consistente, estandarizada y compatible con navegadores cruzados para trabajar con la API de LS y siempre deben preferirse a las otras formas. - Christoph

Me ha llegado a gustar el uso de las notaciones taquigráficas de puntos y corchetes para localStorage, pero tengo curiosidad por conocer la opinión de los demás sobre esto. ¿Es localStorage.getItem ('item') mejor que localStorage.item o localStorage ['item'] O mientras funcionen, las notaciones abreviadas están bien?

Tanto el acceso directo a la propiedad ( localStorage.itemo localStorage['item']) como el uso de la interfaz funcional ( localStorage.getItem('item')) funcionan bien. Ambos son estándar y compatibles con varios navegadores. ^* Según la especificación :

Los nombres de propiedad admitidos en un objeto de almacenamiento son las claves de cada par clave / valor actualmente presente en la lista asociada con el objeto, en el orden en que las claves se agregaron por última vez al área de almacenamiento.

Simplemente se comportan de manera diferente cuando no se encuentra un par clave / valor con el nombre solicitado. Por ejemplo, si la clave 'item'no existe, var a = localStorage.item;resultará en aser undefined, mientras var a = localStorage.getItem('item');que resultará en atener el valor null. Como usted ha descubierto, undefinedy nullno son intercambiables en JavaScript / EcmaScript. :)

EDITAR: Como Christoph señala en su respuesta , la interfaz funcional es la única forma de almacenar y recuperar de manera confiable valores bajo claves iguales a las propiedades predefinidas de localStorage. (Hay seis de ellos: length, key, setItem, getItem, removeItem, y clear.) Así, por ejemplo, lo siguiente será siempre el trabajo:

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

Nota en particular que la primera declaración no afectará a la propiedad localStorage.length(excepto, quizás, incrementándolo si no había llave 'length'ya localStorage). En este sentido, la especificación parece ser internamente inconsistente.

Sin embargo, lo siguiente probablemente no hará lo que desea:

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

Curiosamente, el primero es un no-op en Chrome, pero es sinónimo de la llamada funcional en Firefox. El segundo siempre registrará el número de claves presentes localStorage.

^* _{Esto es cierto para los navegadores que admiten el almacenamiento web en primer lugar. (Esto incluye prácticamente todos los navegadores de escritorio y móviles modernos). Para entornos que simulan el almacenamiento local mediante cookies u otras técnicas, el comportamiento depende de la corrección que se utilice. AquílocalStorage se pueden encontrar varios polyfills para .}

La pregunta ya es bastante antigua, pero dado que se me ha citado en la pregunta, creo que debería decir dos palabras sobre mi declaración.

El objeto de almacenamiento es bastante especial, es un objeto que proporciona acceso a una lista de pares clave / valor. Por lo tanto, no es un objeto o matriz ordinaria.

Por ejemplo, tiene el atributo de longitud, que a diferencia del atributo de longitud de la matriz, es de solo lectura y devuelve el número de claves en el almacenamiento.

Con una matriz puedes hacer:

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

Aquí tenemos la primera razón para usar getters / setters. ¿Qué sucede si desea configurar un elemento llamado 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"

Con otros miembros del objeto Storage, es aún más crítico, ya que se pueden escribir en ellos y puede sobrescribir accidentalmente métodos como getItem. El uso de los métodos de la API evita cualquiera de estos posibles problemas y proporciona una interfaz coherente.

Otro punto interesante es el siguiente párrafo en la especificación (enfatizado por mí):

Los métodos setItem () y removeItem () deben ser atómicos con respecto a la falla. En caso de falla, el método no hace nada. Es decir, los cambios en el área de almacenamiento de datos deben tener éxito o el área de almacenamiento de datos no debe cambiarse en absoluto.

Teóricamente no debería haber diferencia entre los getters / setters y el []acceso, pero nunca se sabe ...

Sé que es una entrada antigua, pero ya que nadie en realidad el rendimiento mencionado que creó algunas pruebas JsPerf establecer criterios de referencia y, además de ser una interfaz coherente getItemy setItemtambién son consistentemente más rápido que usando la notación de puntos o soportes, además de ser mucho más fácil de leer.

Aquí están mis pruebas en JsPerf

Como se mencionó, casi no hay diferencia excepto la clave inexistente. La diferencia en el rendimiento varía según el navegador / sistema operativo que esté utilizando. Pero en realidad no es tan diferente.

Le sugiero que use la interfaz estándar, solo porque es una forma recomendada de usarla.