web-dev-qa-db-fra.com

En HTML5, l'objet localStorage est-il isolé par page / domaine?

L'objet HTML5 localStorage est-il isolé par page/domaine? Je me demande comment je nommerais les clés localStorage. Ai-je besoin d'un préfixe séparé? Ou puis-je les nommer comme je veux?

147
Nathan Moos

C'est par domaine (les mêmes règles de ségrégation que la même politique d'origine ). Pour le faire par page, vous devez utiliser une clé basée sur le location ou une autre approche. .

Vous n'avez pas besoin d'un préfixe, utilisez-en un si vous en avez besoin. Aussi, oui, vous pouvez les nommer comme vous voulez.

172
Nick Craver

Les magasins sont par origine , l’origine étant la même que pour politique de même origine (combinaison du schéma [http vs https, etc.], port et hôte). De la spec :

Chaque contexte de navigation de niveau supérieur possède un ensemble unique de zones de stockage de session, une pour chaque origine.

Ainsi, le stockage pour http://a.example.com et le stockage pour http://b.example.com sont séparés (et ils sont tous deux séparés de http://stackoverflow.com) car ce sont tous des hôtes différents. De même, http://example.com:80 et http://example.com:8080 et https://example.com sont toutes d'origines différentes.

Aucun mécanisme intégré au stockage Web ne permet à une origine d’accéder au stockage d’une autre.

Notez que c’est Origine , pas une URL, donc http://example.com/page1 et http://example.com/page2 _ les deux ont accès au stockage pour http://example.com.

14
T.J. Crowder

Oui, chaque domaine/sous-domaine a un différent localStorage et vous pouvez appeler les clés comme vous le souhaitez (le préfixe n'est pas obligatoire).

Pour obtenir une clé, vous pouvez utiliser la méthode (index) telle que

localStorage.key(0);

Il y avait un objet appelé globalStorage avant où vous pouviez avoir plusieurs localStorages, mais il est obsolète par rapport aux spécifications

7
sebarmeli

Comme d'autres l'ont souligné, le stockage local est unique par protocole, hôte et port. Si vous voulez un moyen pratique de contrôler votre stockage avec des clés préfixées, je suggère localDataStorage .

Cela permet non seulement de renforcer le stockage partagé segmenté au sein du même domaine en préfixant les clés, mais également de stocker de manière transparente des types de données javascript (Array, Boolean, Date, Float, Integer, String et Object), d’obscurcir légèrement les données, de compresser automatiquement les chaînes et facilite la requête par clé (nom) ainsi que la requête par valeur (clé).

[DISCLAIMER] Je suis l'auteur de l'utilitaire [/ DISCLAIMER]

Exemples:

// instantiate our first storage object
// internally, all keys will use the specified prefix, i.e. passphrase.life
var localData = localDataStorage( 'passphrase.life' );

localData.set( 'key1', 'Belgian' )
localData.set( 'key2', 1200.0047 )
localData.set( 'key3', true )
localData.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localData.set( 'key5', null )

localData.get( 'key1' )   -->   'Belgian'
localData.get( 'key2' )   -->   1200.0047
localData.get( 'key3' )   -->   true
localData.get( 'key4' )   -->   Object {RSK: Array(5)}
localData.get( 'key5' )   -->   null


// instantiate our second storage object
// internally, all keys will use the specified prefix, i.e. prismcipher.com
var localData2 = localDataStorage( 'prismcipher.com' );

localData2.set( 'key1', 123456789 )  // integer

localData2.get( 'key1' )   -->   123456789

Comme vous pouvez le constater, les valeurs primitives sont respectées et vous pouvez créer plusieurs instances pour contrôler votre stockage.

5
Mac

J'utilisais toujours un préfixe, simplement pour éviter les collisions potentielles avec les scripts utilisateur, qui pourraient également utiliser localStorage.

5
Benjol

Comme le suggère Nick, il est disponible n'importe où sur ce domaine. SessionStorage fonctionne également de manière légèrement différente car il est distinct de la fenêtre du navigateur. C'est-à-dire que d'autres onglets ou fenêtres du même domaine n'ont pas accès à cette même copie de l'objet de stockage.

0
Matt