Est localStorage.getItem('item') mieux que localStorage.élément ou localStorage['item']?
J'ai récemment demandé une question à propos de LocalStorage. À l'aide de JSON.parse(localStorage.item)
et JSON.parse(localStorage['item'])
n'étaient pas en train de travailler pour revenir NULL
lorsque l'élément n'a pas été encore fixé.
Cependant, JSON.parse(localStorage.getItem('item')
a fait un travail. Et il s'avère, JSON.parse(localStorage.testObject || null)
fonctionne également.
L'un des commentaires a dit essentiellement que localStorage.getItem()
et localStorage.setItem()
doivent toujours être privilégiées:
Les getter et setter fournir un uniforme, standardisé et
crossbrowser compatible façon de travailler avec le LS de l'api et doit toujours
la préférence sur les autres moyens. -Christoph
Je suis venu comme l'utilisation de l'abréviation de dot et de support de notations pour les localStorage, mais je suis curieux de connaître les autres, de " prendre sur cette. Est localStorage.getItem('item') mieux que localStorage.élément ou localStorage['item'] OU aussi longtemps qu'ils travaillent sont l'abréviation de notations d'accord?
- Je crois que Christoph a fait de son raisonnement tout à fait clair.
getItem
etsetItem
sont le standardisé façon de faire les choses. - Les exemples dans le lien que vous avez fourni (en vertu de l'Introduction) utiliser la notation point. Lien: W3C Web de Stockage Introduction
- Je vois. Peu trop endormi pour parcourir ces recommandations, mais comme ce webstorage API est relativement nouveau, je serais personnellement coller avec le correctement documentées
getItem
/setItem
méthodes. Je vais lire les specs plus tard, à nouveau, mais la seule preuve de l'échec façon de répondre à votre question, c'est de faire tout au long de tests sur tous les principaux navigateurs. - Ok. Merci pour vos commentaires!
- La spécification dit "pris en charge les noms de propriété sur un objet de Stockage sont les clés de chaque paire clé/valeur actuelle de la liste associée à l'objet." N'est-ce pas
localStorage.item
standardisé, trop? - Un peu en retard à répondre, mais après avoir vu tant de dupes de cette question et de revenir ici, je vais vous répondre que vous avez absolument raison. Cependant, je vais vous recommander à nouveau à l'aide de
getItem
/setItem
, car ces méthodes ne sont pas incompatibles avec les propriétés de lalocalStorage
objet. Exemple:localStorage.setItem('getItem', 'blah'); console.log(localStorage.getItem('getItem'));
œuvres, alors quelocalStorage.getItem = 'blah';
écrasera localStorage estgetItem
méthode. jsfiddle.net/DrquY - En évitant bien les collisions de nom est le premier (et jusqu'ici la seule) raison logique que j'ai vu pour préférant l'interface fonctionnelle.
- Je n'ai pas encore vu un argument en faveur de l'une ou l'autre approche qui m'a conquis. On ne les paires nom/valeur comme ils l'ont toujours été. L'autre nous donne les valeurs null lorsque nous utilisons des méthodes get/set. Je suppose que si je devais comparer par rapport à une autre liste de valeurs que l'on a la valeur null pour les valeurs optionnelles on pourrait faire plus de sens que les autres mais dire que l'un ou l'autre est "préféré" quand ils sont tous les deux dans la spec est stupide, de l'OMI. Les deux approches ont été mis à disposition pour une raison.
- Veuillez prendre un coup d'oeil à ma réponse et dis-moi ce que vous en pensez.
Vous devez vous connecter pour publier un commentaire.
La fois directe de l'accès à la propriété (
localStorage.item
oulocalStorage['item']
) et à l'aide de l'interface fonctionnelle (localStorage.getItem('item')
), beau travail. Les deux sont standard et compatible avec tous les navigateurs.* d'Après le spec:Ils se comportent différemment lorsqu'aucune paire clé/valeur est trouvée avec le nom demandé. Par exemple, si la clé
'item'
n'existe pas,var a = localStorage.item;
entraîneraa
êtreundefined
, tandis quevar a = localStorage.getItem('item');
entraîneraa
ayant la valeurnull
. Comme vous l'avez découvert,undefined
etnull
ne sont pas interchangeables en JavaScript/EcmaScript. 🙂EDIT: Christoph points dans sa réponse, l'interface fonctionnelle est le seul moyen fiable de stocker et de récupérer des valeurs sous les touches de l'égalité pour les propriétés prédéfinies de
localStorage
. (Il y en a six:length
,key
,setItem
,getItem
,removeItem
, etclear
.) Ainsi, par exemple, la suivante le sera toujours:En particulier de noter que la première déclaration n'affectera pas la propriété
localStorage.length
(sauf peut-être l'incrémentation si il n'y avait pas de clé'length'
déjà danslocalStorage
). À cet égard, le spec semble incohérent.Cependant, la suivante ne sera probablement pas faire ce que vous voulez:
Fait intéressant, le premier est un no-op dans Chrome, mais est synonyme avec la fonction d'appel dans Firefox. La deuxième sera toujours le journal le nombre de clés présents dans
localStorage
.* C'est vrai pour les navigateurs web de support de stockage en premier lieu. (Cela comprend à peu près tous moderne de bureau et les navigateurs mobiles.) Pour les environnements qui permettent de simuler le stockage local en utilisant des cookies ou d'autres techniques, le comportement dépend de la cale qui est utilisé. Plusieurs polyfills pour
localStorage
peut être trouvé ici.La question est déjà assez vieux, mais depuis que j'ai été cité dans la question, je pense que je devrais dire deux mots à propos de ma déclaration.
L'Objet de Stockage est assez spéciale, c'est un objet qui permet d'accéder à une liste de paires clé/valeur. Ainsi, il n'est pas un objet ordinaire ou d'un tableau.
Par exemple, il a la longueur de l'attribut, qui, contrairement à la longueur du tableau attribut est en lecture seule et renvoie le nombre de clés dans le stockage.
Avec un tableau que vous pouvez faire:
Nous avons ici la première raison d'utiliser les getters/setters. Si vous souhaitez définir un élément appelé
length
?Avec les autres membres de l'objet de Stockage il est encore plus critique, car ils sont en écriture et vous pouvez accidentellement écraser méthodes comme
getItem
. En utilisant les méthodes de l'API empêche aucun de ces problèmes et fournit une Interface cohérente.Également intéressant, c'est le paragraphe suivant à la spec (souligné par moi):
Théoriquement il devrait y avoir aucune différence entre les getters/setters et les
[]
d'accès, mais on ne sait jamais...length
propriété ne change pas (au moins dans Chrome et Firefox[*]) si vous appelezlocalStorage.setItem("length", something);
, mais vous pouvez récupérersomething
aveclocalStorage.getItem("length");
. Fait intéressant, l'attributionlocalStorage.length = something;
de Chrome est un no-op, mais dans Firefox, il va stockersomething
sous la clé"length"
(que vous pouvez ensuite récupérer uniquement à l'aide de l'interface fonctionnelle). [*] En fait, dans Firefox, lalength
propriété changera si la clé"length"
n'est pas déjà danslocalStorage
.localStorage
a six propriétés prédéfinies:length
,key
,getItem
,setItem
,removeItem
, etclear
.Je sais que c'est un vieux post mais comme personne n'en fait mentionné performance que j'ai mis en place certaines JsPerf tests à l'indice de référence et ainsi comme étant une interface cohérente
getItem
etsetItem
sont également toujours plus rapide que d'utiliser la notation de point ou de supports ainsi que d'être beaucoup plus facile à lire.Voici mes tests sur JsPerf
getItem
etsetItem
sont les plus lents dans chaque catégorie, avec dot être le plus rapide sur chrome et le support étant le plus rapide sur firefox. je pense aussi que "l'être beaucoup plus facile à lire" est entièrement subjectif ... oui, c'membres de la fonction de son interprétation, mais quelqu'un qui a déjà travaillé avec des objet ou un tableau de variables savez à une demi-seconde de ce qui se passe avec dot / support.Comme il a été mentionné, il n'y a presque pas de différence à l'exception de l'inexistants clé. Le différence de performance varie en fonction de ce navigateur/système d'exploitation utilisez-vous. Mais elle n'est pas vraiment différent.
Je vous suggérons d'utiliser l'interface standard, juste parce que c'est un moyen conseillé de l'utiliser.