No HTML5, o objeto localStorage é isolado por página / domínio?

172

O objeto localStorage do HTML5 é isolado por página / domínio? Eu estou querendo saber por causa de como eu nomearia chaves localStorage. Preciso de um prefixo separado? Ou posso nomeá-los como quiser?

Nathan Moos
fonte
Eu sempre usaria um prefixo, apenas para evitar possíveis colisões com scripts do usuário - que também poderiam usar o localStorage.
Benjol
IMO São os scripts do usuário que devem evitar colisões, não as páginas. No meu script de usuário, estou usando um prefixo com o nome do script.
Camilo Martin

Respostas:

195

É por domínio e porta (as mesmas regras de segregação da mesma política de origem ). Para torná-lo por página, você precisará usar uma chave com base na location, ou em alguma outra abordagem.

Você não precisa de um prefixo, use um se precisar. Além disso, sim, você pode nomeá-los como quiser.

Nick Craver
fonte
77
É único por protocol://host:portcombinação.
thasmo
1
www.mysite.it:8012/App1 e www.mysite.it:8012/App2 tem armazenamento local compartilhado?
DariN1
3
@ DarioN1 Sim, www.mysite.it:8012/App1 e www.mysite.it:8012/App2 compartilharam o armazenamento local. (Advertência: se você acessá-los de diferentes protocolos, EG http vs https, eles não são compartilhados. Dentro do mesmo protocolo, subdomínio, domínio e porta - eles são compartilhados. Esta é uma simplificação do conceito de 'Origem'. )
William
31

As lojas são por origem , onde "origem" é igual à Política de mesma origem (uma combinação de esquema [ httpvs. https, etc.], porta e host). Das especificações :

Cada contexto de navegação de nível superior possui um conjunto exclusivo de áreas de armazenamento de sessões, uma para cada origem.

Portanto, o armazenamento para http://a.example.come o armazenamento para http://b.example.comsão separados (e ambos são separados http://example.com), pois todos são hosts diferentes. Da mesma forma, http://example.com:80e http://example.com:8080e https://example.comsão todas as origens diferentes.

Não há mecanismo incorporado ao armazenamento na Web que permita que uma origem acesse o armazenamento de outra.

Observe que é de origem , não URL, portanto, http://example.com/page1e http://example.com/page2ambos têm acesso ao armazenamento para http://example.com.

TJ Crowder
fonte
3
Isso foi muito escrito, gostou mais desta resposta, pois é fácil de ler e totalmente explicado, mesmo para aqueles que apenas iniciam o desenvolvimento.
Bahi
1
+1 por mencionar que "Não há mecanismo incorporado ao armazenamento na Web que permita que uma origem acesse o armazenamento de outra".
Fabien Quatravaux
7

Sim, cada domínio / subdomínio possui um localStorage diferente e você pode chamar as chaves como desejar (o prefixo não é necessário).

Para obter uma chave, você pode usar a chave do método (índice), como

localStorage.key(0);

Havia um objeto chamado globalStorage antes em que você poderia ter vários localStorages, mas foi preterido das especificações

sebarmeli
fonte
7

Como outros já apontaram, o localStorage é único por protocolo, host e porta. Se você quiser uma maneira prática de controlar seu armazenamento com chaves prefixadas, sugiro localDataStorage .

Além de ajudar a impor o armazenamento compartilhado segmentado no mesmo domínio, prefixando chaves, ele também armazena de forma transparente os tipos de dados javascript (Matriz, Booleano, Data, Flutuação, Inteiro, String e Objeto), fornece ofuscação leve de dados, compacta automaticamente as strings e facilita a consulta por chave (nome), bem como a consulta por valor (chave).

[AVISO LEGAL] Eu sou o autor do utilitário [/ AVISO LEGAL]

Exemplos:

// 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 você pode ver, os valores primitivos são respeitados e você pode criar várias instâncias para controlar seu armazenamento.

Mac
fonte
0

Está disponível em qualquer lugar desse domínio, como sugeriu Nick, como alternativa, o sessionStorage funciona de maneira um pouco diferente, pois é distinto da própria janela do navegador. Ou seja, outras guias ou janelas no mesmo domínio não têm acesso à mesma cópia do objeto de armazenamento.

Matt
fonte