web-dev-qa-db-fra.com

localStorage - utilisez les fonctions getItem/setItem ou accédez directement à un objet?

L'utilisation des méthodes définies sur l'objet localStorage présente-t-elle certains avantages par rapport à l'accès direct aux propriétés de l'objet? Par exemple, au lieu de:

var x = localStorage.getItem(key);
localStorage.setItem(key, data);

J'ai fait ceci:

var x = localStorage[key];
localStorage[key] = data;

Y a-t-il un problème avec ça?

42
DisgruntledGoat

Pas vraiment, ils sont, fondamentalement, exactement les mêmes. L'un utilise l'encapsulation (getter/setter) pour mieux protéger les données et pour une utilisation simple. Vous êtes censé utiliser ce style (pour la sécurité).

L'autre permet une meilleure utilisation lorsque les noms (clés) sont inconnus et pour les tableaux et les boucles. Utilisez .key() et .length pour parcourir vos éléments de stockage sans connaître leur nom de clé.

J'ai trouvé que c'était une excellente ressource: http://diveintohtml5.info/storage.html

Cette question peut également fournir des informations supplémentaires à certains: ordre des clés HTML5 localStorage } _

Addenda:

Clairement, il y a eu une certaine confusion à propos de l'encapsulation. Découvrez ce rapide Wikipedia . Mais sérieusement, j'espère que les utilisateurs de ce site sauront google.

Pour continuer, l’encapsulation est l’idée que vous créez de petits portails d’entrée et de sortie pour la communication avec un autre système. Supposons que vous créez un package API que les autres utilisateurs pourront utiliser. Supposons que vous ayez un tableau d'informations dans ce système d'API qui est mis à jour par entrée utilisateur. Vous pouvez faire en sorte que les utilisateurs de votre API mettent directement ces informations dans le tableau ... à l'aide de la méthode array[key]. OR vous pouvez utiliser l'encapsulation. Prenez le code qui l'ajoute au tableau et enveloppez-le dans une fonction (disons une fonction setArray() ou setWhateverMakesSense()) que l'utilisateur de votre API appelle pour ajouter ce type d'informations. Ensuite, dans cette fonction set, vous pouvez rechercher des problèmes dans les données, vous pouvez les ajouter correctement au tableau, au cas où vous en auriez besoin Pushed ou shifted d’une certaine manière ... etc. vous contrôlez la manière dont l'entrée de l'utilisateur entre dans le programme actuel. Donc, en soi, cela n’ajoute pas de sécurité, mais permet l’écriture de la sécurité par vous, l’auteur de l’API. Cela permet également une meilleure gestion des versions/mises à jour car les utilisateurs de votre API n'auront pas à réécrire le code si vous décidez d'effectuer des modifications internes. Mais ceci est inhérent au bien OOP de toute façon.

Dans le cas présent de javascript et de l'objet localStorage, ils ont déjà écrit cette API, ils en sont l'auteur et nous en sommes les utilisateurs. Si les auteurs décident de modifier le fonctionnement de localStorage, il sera alors moins susceptible de devoir réécrire votre code si les méthodes d'encapsulation ont été utilisées. Mais nous savons tous qu'il est hautement improbable que ce niveau de changement se produise, du moins dans peu de temps. Et comme les auteurs n’avaient pas de contrôles de sécurité différents différents à effectuer ici, ces deux méthodes d’utilisation de localStorage sont pour l’instant identiques. C'est un peu comme une cale. Cependant, nous pouvons facilement créer notre propre encapsulation pour écraser/remplacer l'encapsulation existante autour de localStorage afin d'effectuer nos propres vérifications de sécurité.

PT

26
Pimp Trizkit

Je pense qu'ils sont exactement les mêmes, la seule chose que la documenation déclare:

Remarque: Bien que les valeurs puissent être définies et lues en utilisant le standard Méthode d'accès à la propriété JavaScript, à l'aide des méthodes getItem et setItem méthodes est recommandé.

Si vous utilisez la cale complète, cependant, il est indiqué que:

Utilisation des méthodes localStorage.yourKey = yourValue; et supprimez localStorage.yourKey; définir ou supprimer une clé n’est pas une méthode sécurisée avecce code.

et la cale limitée:

Utilisation de la méthode localStorage.yourKey pour obtenir, définir ou supprimer une clé n'est pas autorisée avec ce code.

9
jbabey

L'un des principaux avantages que je constate est que je n'ai pas à vérifier si une valeur est indéfinie ou non avant que je l'utilise avec JSON.parse (), car getItem () renvoie NULL et non indéfini.

3
Hintron

Tant que vous n'utilisez pas la "notation par points" comme window.localStorage.key, vous êtes probablement OK, car ce n'est pas disponible dans Windows Phone 7. Je n'ai pas testé entre crochets (votre deuxième exemple). Personnellement, j'utilise toujours l'ensemble et j'obtiens des fonctions (votre premier exemple).

0
helonaut