En HTML5, ¿el objeto localStorage está aislado por página / dominio?

172

¿El objeto HTML5 localStorage está aislado por página / dominio? Me pregunto por cómo nombraría las claves de almacenamiento local. ¿Necesito un prefijo separado? ¿O puedo nombrarlos como quiera?

Nathan Moos
fuente
Siempre usaría un prefijo, solo para evitar posibles colisiones con los scripts de usuario, que también podrían usar localStorage.
Benjol
IMO Son los scripts de usuario los que deben evitar colisiones, no las páginas. En mi script de usuario, estoy usando un prefijo con el nombre del script.
Camilo Martin

Respuestas:

195

Es por dominio y puerto (las mismas reglas de segregación que la misma política de origen ), para que sea por página, tendría que usar una clave basada en el locationenfoque u otro enfoque.

No necesita un prefijo, use uno si lo necesita. Además, sí, puedes nombrarlos como quieras.

Nick Craver
fuente
77
Es único por protocol://host:portcombinación.
thasmo
1
www.mysite.it:8012/App1 y www.mysite.it:8012/App2 ¿ha compartido el almacenamiento local?
DarioN1
3
@ DarioN1 Sí, www.mysite.it:8012/App1 y www.mysite.it:8012/App2 han compartido almacenamiento local. (Advertencia: si accede a ellos desde diferentes protocolos, EG http vs https, estos no se comparten. Dentro del mismo protocolo, subdominio, dominio y puerto, se comparten. Esta es una simplificación del concepto de 'Origen'. )
William
31

Las tiendas son por origen , donde "origen" es el mismo que para la Política de mismo origen (una combinación de esquema [ httpvs. https, etc.], puerto y host). De la especificación :

Cada contexto de navegación de nivel superior tiene un conjunto único de áreas de almacenamiento de sesión, una para cada origen.

Por lo tanto, el almacenamiento para http://a.example.comy el almacenamiento para http://b.example.comestán separados (y ambos están separados de http://example.com) ya que todos son hosts diferentes. Del mismo modo, http://example.com:80y http://example.com:8080y https://example.comson todos orígenes diferentes.

No hay ningún mecanismo integrado en el almacenamiento web que permita que un origen acceda al almacenamiento de otro.

Nota que de origen , no URL, por lo que http://example.com/page1, y http://example.com/page2ambos tienen acceso al almacenamiento para http://example.com.

TJ Crowder
fuente
3
Esto fue escrito en gran medida, me gustó más esta respuesta, ya que es fácil de leer y explicar por completo, incluso para aquellos que simplemente comenzarían el desarrollo.
baHI
1
+1 por mencionar que "No hay ningún mecanismo integrado en el almacenamiento web que permita que un origen acceda al almacenamiento de otro".
Fabien Quatravaux el
7

Sí, cada dominio / subdominio tiene un localStorage diferente y puede llamar a las teclas como desee (no se requiere prefijo).

Para obtener una clave, puede usar la clave de método (índice) como

localStorage.key(0);

Hubo un objeto llamado globalStorage antes en el que se podían tener múltiples LocalStorages, pero ha quedado en desuso de las especificaciones

sebarmeli
fuente
7

Como otros han señalado, localStorage es único por protocolo, host y puerto. Si desea una forma práctica de controlar su almacenamiento con claves prefijadas, le sugiero localDataStorage .

No solo ayuda a forzar el almacenamiento compartido segmentado dentro del mismo dominio mediante el prefijo de claves, sino que también almacena de forma transparente los tipos de datos de JavaScript (matriz, booleano, fecha, flotante, entero, cadena y objeto), proporciona una ofuscación de datos liviana, comprime cadenas automáticamente y facilita la consulta por clave (nombre) así como la consulta por valor (clave).

[RENUNCIA] Soy el autor de la utilidad [/ RENUNCIA]

Ejemplos:

// 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

Como puede ver, se respetan los valores primitivos y puede crear varias instancias para controlar su almacenamiento.

Mac
fuente
0

Está disponible en cualquier lugar de ese dominio, como lo sugirió Nick, como alternativa hay sessionStorage funciona de manera ligeramente diferente, ya que es distinto de la ventana del navegador. Es decir que otras pestañas o ventanas en el mismo dominio no tienen acceso a esa misma copia del objeto de almacenamiento.

Mate
fuente