LocalStorage.getItem ('item') è migliore di localStorage.item o localStorage ['item']?

Di recente ho posto una domanda su LocalStorage . Usando JSON.parse(localStorage.item)e JSON.parse(localStorage['item'])non funzionavano per tornare NULLquando l'elemento non era stato ancora impostato.

Tuttavia, JSON.parse(localStorage.getItem('item')ha funzionato. E si scopre che JSON.parse(localStorage.testObject || null)funziona anche.

Uno dei commenti fondamentalmente lo diceva localStorage.getItem()e localStorage.setItem()dovrebbe essere sempre preferito:

Il getter e il setter forniscono un modo coerente, standardizzato e compatibile con il crossbrowser di lavorare con l'API LS e dovrebbero essere sempre preferiti rispetto agli altri modi. - Christoph

Mi è piaciuto usare le notazioni stenografiche punto e parentesi per localStorage, ma sono curioso di conoscere il punto di vista degli altri. LocalStorage.getItem ('item') è migliore di localStorage.item o localStorage ['item'] OPPURE finché funzionano le notazioni abbreviate vanno bene?

Sia l'accesso diretto alla proprietà ( localStorage.itemo localStorage['item']) che l'utilizzo dell'interfaccia funzionale ( localStorage.getItem('item')) funzionano bene. Entrambi sono compatibili standard e cross-browser. ^* Secondo le specifiche :

I nomi di proprietà supportati su un oggetto di archiviazione sono le chiavi di ciascuna coppia chiave / valore attualmente presente nell'elenco associato all'oggetto, nell'ordine in cui le chiavi sono state aggiunte l'ultima volta all'area di archiviazione.

Si comportano in modo diverso quando non viene trovata alcuna coppia chiave / valore con il nome richiesto. Ad esempio, se la chiave 'item'non esiste, var a = localStorage.item;risulterà in aessere undefined, mentre var a = localStorage.getItem('item');risulterà in aavere il valore null. Come hai scoperto undefinede nullnon sono intercambiabili in JavaScript / EcmaScript. :)

EDIT: come sottolinea Christoph nella sua risposta , l'interfaccia funzionale è l'unico modo per archiviare e recuperare in modo affidabile i valori sotto chiavi uguali alle proprietà predefinite di localStorage. (Ci sono sei di questi: length, key, setItem, getItem, removeItem, e clear.) Così, per esempio, il seguente funziona sempre:

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

Si noti in particolare che la prima istruzione non influenzerà la proprietà localStorage.length(tranne forse incrementandola se non c'era 'length'già una chiave localStorage). A questo proposito, le specifiche sembrano essere internamente incoerenti.

Tuttavia, probabilmente quanto segue non farà quello che vuoi:

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

È interessante notare che il primo è un no-op in Chrome, ma è sinonimo di chiamata funzionale in Firefox. Il secondo registrerà sempre il numero di chiavi presentilocalStorage .

^* _{Questo è vero per i browser che supportano l'archiviazione web in primo luogo. (Ciò include praticamente tutti i browser desktop e mobili moderni.) Per ambienti che simulano l'archiviazione locale utilizzando cookie o altre tecniche, il comportamento dipende dallo shim utilizzato. Diversi polyfill per localStoragepossono essere trovati qui .}

La domanda è già piuttosto vecchia, ma poiché sono stata citata nella domanda, penso che dovrei dire due parole sulla mia affermazione.

L'oggetto di archiviazione è piuttosto speciale, è un oggetto che fornisce l'accesso a un elenco di coppie chiave / valore. Quindi non è un oggetto o un array ordinario.

Ad esempio, ha l'attributo length, che a differenza dell'attributo length dell'array è di sola lettura e restituisce il numero di chiavi nella memoria.

Con un array puoi fare:

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

Qui abbiamo il primo motivo per usare i getter / setter. E se volessi impostare un elemento chiamato 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 altri membri dell'oggetto Storage è ancora più critico, poiché sono scrivibili e puoi sovrascrivere accidentalmente metodi come getItem. L'utilizzo dei metodi API previene uno qualsiasi di questi possibili problemi e fornisce un'interfaccia coerente.

Un altro punto interessante è il seguente paragrafo nelle specifiche (sottolineato da me):

I metodi setItem () e removeItem () devono essere atomici rispetto al fallimento. In caso di fallimento, il metodo non fa nulla. Cioè, le modifiche all'area di archiviazione dei dati devono avere esito positivo oppure l'area di archiviazione dei dati non deve essere modificata affatto.

Teoricamente non dovrebbe esserci alcuna differenza tra i getter / setter e l' []accesso, ma non si sa mai ...

So che è un vecchio post ma poiché nessuno ha effettivamente menzionato le prestazioni, ho impostato alcuni test JsPerf per confrontarlo e oltre ad essere un'interfaccia coerente getIteme setItemsono anche costantemente più veloci rispetto all'uso della notazione a punti o delle parentesi, oltre ad essere molto più facili da leggere.

Ecco i miei test su JsPerf

Come è stato detto, non c'è quasi nessuna differenza tranne che per la chiave inesistente. La differenza di prestazioni varia a seconda del browser / sistema operativo in uso. Ma non è poi così diverso.

Ti consiglio di usare l'interfaccia standard, solo perché è un modo consigliato di usarla.