localStorage e sessionStorage com cookies

1. armazenamento local de armazenamento na web 

webstorage é armazenamento local == localStorage (armazenamento local) e sessionStorage (armazenamento local)

• O ciclo de vida do localStorage é permanente, o que significa que, a menos que o usuário limpe as informações do localStorage na IU fornecida pelo navegador, as informações existirão para sempre.

O tamanho dos dados armazenados é geralmente de 5 MB e é salvo apenas no cliente (ou seja, navegador) e não participa da comunicação com o servidor

Usado para: geralmente usado para login de longo prazo (+julgando se o usuário fez login), adequado para armazenamento de dados locais de longo prazo, obtidos por window.localStorage

• sessionStorage só é válido na sessão atual e será limpo após o fechamento da página ou do navegador.

O tamanho dos dados armazenados é geralmente de 5 MB e é salvo apenas no cliente (ou seja, navegador) e não participa da comunicação com o servidor.

A interface original é aceitável e também pode ser reencapsulada para ter melhor suporte para Object e Array

Usado para: login único de contas confidenciais, usando window.sessionStorage;

Nota: Diferentes navegadores não podem compartilhar informações em localStorage ou sessionStorage.

Páginas diferentes do mesmo navegador podem compartilhar o mesmo localStorage (as páginas pertencem ao mesmo nome de domínio e porta), mas as informações do sessionStorage não podem ser compartilhadas entre páginas ou guias diferentes (restrito pela política de mesma origem).

No entanto, exceto que a página da guia contém várias tags iframe, o sessionStorage pode ser compartilhado

O que eles têm em comum: todos são armazenados no lado do cliente e não interagem com o servidor.

O tamanho dos dados de armazenamento é geralmente: 5MB

Somente tipos de string podem ser armazenados e objetos complexos podem ser processados ​​por stringify e análise de objetos JSON fornecidos pelo ECMAScript

Prós: Mais espaço de armazenamento: 4 KB para cookies versus 5 MB para WebStorage

Economize tráfego de rede: o WebStorage não será transmitido ao servidor e os dados armazenados localmente podem ser obtidos diretamente.

Não será enviado ao servidor como um cookie.

Assim, a interação entre o cliente e o servidor é reduzida e o tráfego de rede é economizado.
Para os dados que só precisam ser salvos enquanto o usuário navega em um conjunto de páginas e podem ser descartados após o fechamento do navegador,

Visualização rápida: Alguns dados são armazenados no WebStorage, além do cache do próprio navegador. Ao obter dados, eles podem ser obtidos localmente e não do servidor, por isso é mais rápido

Segurança: WebStorage não será enviado para o servidor com o cabeçalho HTTP, então a segurança é relativamente maior que a dos cookies, e não há preocupação com interceptação, mas ainda há problemas de falsificação

Alguns métodos de uso:

• setItem (chave, valor) —— salva dados e armazena informações na forma de pares chave-valor.
• getItem (chave) —— Obtenha os dados, passe o valor da chave e você pode obter o valor correspondente.
• removeItem (chave) —— Exclua um único item e remova as informações correspondentes de acordo com o valor da chave.
• clear () - exclui todos os dados
• key (index) - obtém a chave de um índice

Dois, biscoitos

Ou seja, HTTP Cookie, que envia o cabeçalho HTTP Set-Cookie como parte da resposta na solicitação HTTP. Armazenado na forma de nome=valor

Função e composição: (usado principalmente para salvar informações de login)

• nome: nome (não diferencia maiúsculas de minúsculas, mas é melhor pensar que sim)
• Valor: valor (através da codificação de URL: encodeURIComponent)
• área
• caminho
• Tempo de expiração: Geralmente, o padrão é que o navegador esteja fechado e inválido, e você mesmo pode definir o tempo de expiração
• Sinalizador de segurança: Após definir o sinalizador de segurança, ele só será enviado ao servidor quando a conexão SSL for feita

Lifetime: Válido apenas até o tempo de expiração do cookie definido, mesmo que a janela ou o navegador esteja fechado. O tamanho dos dados armazenados é de cerca de 4K. Existe um limite de número (cada navegador é diferente), geralmente não mais que 20.

Comunicação com o servidor: será sempre transportada no cabeçalho HTTP. Se você usar cookies para salvar muitos dados, isso causará problemas de desempenho

Vantagens dos cookies: escalabilidade e usabilidade extremamente altas

1. Por meio de uma boa programação, controle o tamanho do objeto de sessão salvo no cookie
2. Por meio de criptografia e tecnologia de transmissão segura, reduza a possibilidade de quebra de cookies
3. Armazene apenas dados insensíveis em cookies, mesmo que sejam roubados, não haverá grandes perdas
4. Controle o tempo de vida do cookie para que não seja válido para sempre. Nesse caso, é provável que o ladrão receba um cookie expirado

Desvantagens dos cookies:

1. Limites de duração e número de cookies. Cada domínio só pode ter até 20 cookies, e o comprimento de cada cookie não pode exceder 4KB, caso contrário, será cortado
2. Problemas de segurança. Se o cookie for bloqueado por alguém, essa pessoa poderá obter todas as informações da sessão. Criptografia não funciona
3. Alguns estados não podem ser salvos no lado do cliente. Por exemplo, para evitar o envio repetido de formulários, precisamos salvar um contador no lado do servidor. Se o contador for salvo no cliente, não terá efeito

sessionStorage
1) sessionStorage é um objeto do tipo Storage, com os métodos clear(), getItem(name), key(index), removeItem(name), setItem(name, value) 2) objeto sessionStorage armazena dados específicos de uma determinada sessão
, Ou seja, os dados só são mantidos até que o navegador seja fechado
3) Salve os dados no objeto da sessão. A chamada sessão refere-se ao período de tempo desde a entrada no site até o fechamento do navegador quando o usuário navega em um determinado site, ou seja, o tempo gasto pelo usuário navegando no site. O objeto de sessão pode ser usado para salvar quaisquer dados que precisam ser salvos durante esse período de tempo
4) sessionStorage é um armazenamento temporário de

localStorage
1) localStorage também é um objeto do tipo Storage
2) Em HTML5, localStorage é substituído por um esquema que mantém os dados armazenados no cliente globalStorage (globalStorage deve especificar um nome de domínio)
3) localStorage armazenará permanentemente os dados da sessão, a menos que removaItem, caso contrário, os dados da sessão sempre existirão
4) salve os dados no dispositivo de hardware local do cliente (geralmente se refere para o disco rígido ou outros dispositivos de hardware), mesmo que o navegador seja fechado, os dados ainda existem e ainda podem ser usados ​​na próxima vez que o navegador for aberto para visitar o site 5) localStorage é salvo
permanentemente

Três, a diferença

A diferença entre localStorage de armazenamento local e cookies
1) O cookie é transmitido entre o navegador e o servidor
sessionStorage e localStorage não enviará os dados para o servidor, mas apenas os salvará localmente
2) O período de validade dos dados é diferente .
O cookie só é válido até o tempo de expiração do cookie definido , mesmo se a janela ou o navegador estiver fechado
sessionStorage: válido somente antes da janela atual do navegador ser fechada localStorage é
sempre válido e armazenamento de longo prazo Não pode exceder 4k. Embora sessionStorage e localStorage também possuem restrições de tamanho de armazenamento, são muito maiores que os cookies e podem chegar a 5M ou mais. 4) O scope não usa sessionStorage e não compartilha em diferentes janelas do navegador. Os cookies compartilhados também são compartilhados entre todas as janelas da mesma origem. WebStorage suporta um mecanismo de notificação de eventos, que pode enviar notificações de atualizações de dados para ouvintes. A interface API do Web Storage é mais conveniente de usar

A diferença entre cookie, sessão e localStorage

1) O conteúdo do cookie inclui principalmente: nome, valor, tempo de expiração, caminho e domínio, e o caminho e o domínio juntos constituem o escopo do cookie.

Se o tempo não for definido, significa que o tempo de vida deste cookie é durante a sessão do navegador e o cookie desaparecerá quando a janela do navegador for fechada. Esse tipo de cookie cujo tempo de vida é a sessão do navegador é chamado de cookie de sessão 2) Os cookies de sessão geralmente
não são armazenados no disco rígido, mas na memória, é claro, esse comportamento não é especificado pela especificação. Se o tempo de expiração for definido, o navegador salvará o cookie no disco rígido e, após fechar e abrir o navegador, esses cookies ainda serão válidos até que o tempo de expiração definido seja excedido.

Para cookies armazenados na memória, diferentes navegadores possuem diferentes mecanismos de sessão de processamento.
3) Quando o programa precisa criar uma sessão para a solicitação de um cliente, o servidor primeiro verifica se a solicitação do cliente já contém um identificador de sessão (chamado id de sessão),

Se estiver incluído, significa que uma sessão foi criada para este cliente antes, e o servidor recuperará a sessão de acordo com o ID da sessão (se não puder ser recuperada, uma nova será criada),

Se a solicitação do cliente não contiver um id de sessão, crie uma sessão para o cliente e gere um id de sessão associado a esta sessão. O valor do id de sessão deve ser um caractere que não seja repetido nem fácil de ser encontrado para string de imitação,

Esta ID de sessão será retornada ao cliente nesta resposta para armazenamento. Os cookies podem ser usados ​​para salvar o ID da sessão, para que o navegador possa enviar automaticamente esse identificador para o servidor de acordo com as regras durante o processo de interação.

A diferença entre cookie e sessão

1) Os dados do cookie são armazenados no navegador do cliente e os dados da sessão são armazenados no servidor.
2) O cookie não é muito seguro. Outros podem analisar o cookie armazenado localmente e enganar o cookie. Considerando a segurança, a sessão deve ser usado
. Ele é armazenado no servidor por um longo tempo. Quando o número de visitas aumenta, ele ocupará o desempenho do seu servidor. Considerando a redução do desempenho do servidor, os cookies devem ser usados. 4) Os dados salvos por um único o cookie não pode
exceder 4K. Salve 20 cookies
5) É recomendável armazenar informações importantes, como informações de login, como uma sessão. Se você precisar manter outras informações, pode colocá-las em um cookie. 6)
A sessão é salva no servidor , e o cliente não conhece a confiança nele; Pode saber as informações
7) O objeto é salvo na sessão e a string é salva no cookie
8) A sessão não consegue distinguir o caminho. Durante a visita do mesmo usuário a um site, todas as sessões podem ser acessadas em qualquer lugar e, se o parâmetro path for definido no cookie, os cookies em diferentes caminhos no mesmo site não poderão acessar um ao outro

A diferença entre armazenamento na web e cookies

1) O conceito de Web Storage é semelhante ao de cookies, a diferença é que ele é projetado para armazenamento de maior capacidade, o tamanho dos cookies é limitado e os cookies serão enviados sempre que uma nova página for solicitada, o que é um desperdício invisível Em Além disso, o cookie precisa especificar o escopo e não pode ser chamado entre domínios.
2) o armazenamento na web tem métodos como setItem, getItem, removeItem, clear etc. Ao contrário dos cookies, os desenvolvedores front-end precisam encapsular setCookie e getCookie
. ) Mas os cookies também são indispensáveis ​​Sim, o papel dos cookies é interagir com o servidor e existe como parte da especificação http, enquanto o armazenamento na web é apenas para "armazenar" dados localmente. sessionStorage, localStorage e cookies são todos dados armazenados no lado do navegador
. O conceito de sessionStorage é muito especial, introduz o conceito de "janela do navegador",

sessionStorage são os dados que sempre existem na mesma janela da mesma fonte, ou seja, enquanto a janela do navegador não for fechada, mesmo que a página seja atualizada ou outra página da mesma fonte seja inserida, os dados ainda existe.

Depois que a janela for fechada, o sessionStorage
Solicitarserá destruído. Ao mesmo tempo, diferentes janelas abertas "independentemente", mesmo para a mesma página, os objetos sessionStorage são diferentes. Dados de exibição rápida: bom desempenho, a leitura de dados do local é muito mais rápida do que a obtenção de dados do servidor pela rede, local Os dados podem ser obtidos a tempo e a própria página da Web também pode ter um cache, portanto, se toda a página e os dados forem locais, eles podem ser exibidos imediatamente. Armazenamento temporário: Em muitos casos, os dados só precisam ser usados ​​enquanto o usuário navega em um grupo de páginas. Após fechar a janela, os dados serão salvo. Ele pode ser descartado, é muito conveniente usar o sessionStorage neste caso

A diferença entre o armazenamento local do navegador e o armazenamento do lado do servidor

1) Os dados podem ser armazenados localmente no navegador ou no lado do servidor
2) O navegador pode salvar alguns dados e acessá-los diretamente do local quando necessário. sessionStorage, localStorage e cookies são todos dados armazenados localmente pelo navegador
3) O servidor também pode salvar todos os dados de todos os usuários, mas o navegador precisa solicitar dados do servidor quando necessário.
4) O servidor pode salvar os dados persistentes do usuário, como banco de dados e armazenamento em nuvem. O servidor também pode salvar os dados do usuário dados de sessão temporária. O mecanismo de sessão do lado do servidor, como o objeto de sessão do jsp, armazena os dados no servidor. 5) O
servidor e o navegador precisam apenas passar o ID da sessão e o servidor encontra o usuário correspondente de acordo com o id da sessão O objeto da sessão, os dados da sessão são válidos apenas por um período de tempo, este é o período de validade da sessão definido pelo lado do servidor
6) O lado do servidor salva todos os dados do usuário, portanto, a sobrecarga do lado do servidor é relativamente grande, enquanto o lado do navegador salva os dados que diferentes usuários precisam Os dados do usuário são armazenados separadamente no respectivo navegador do usuário,

A extremidade do navegador geralmente é usada apenas para armazenar pequenos dados, e os não serviços podem armazenar dados grandes ou pequenos. O servidor armazena dados com mais segurança e o navegador é adequado apenas para armazenar dados gerais.

A diferença entre sessionStorage, localStorage e cookie

1) O mesmo ponto é que eles são todos armazenados no lado do navegador e da mesma origem.
2) Os dados do cookie são sempre transportados na solicitação http da mesma origem (mesmo que não seja obrigatório), ou seja, o o cookie é transmitido entre o navegador e o servidor, enquanto o sessionStorage e o localStorage não enviam dados automaticamente para o servidor,

Salvo apenas localmente. Os dados do cookie também têm o conceito de caminho (caminho), que pode limitar o cookie a pertencer a um determinado caminho.
3) O limite de tamanho de armazenamento também é diferente. Os dados do cookie não podem exceder 4K. Ao mesmo tempo, porque cada solicitação HTTP carregará o cookie, o cookie só é adequado para salvar por um longo tempo. Pequenos dados, como IDs de sessão.

Embora o sessionStorage e o localStorage também tenham limitações de tamanho de armazenamento, eles são muito maiores que os cookies e podem atingir 5 M ou mais
4) O período de validade dos dados é diferente, sessionStorage: válido apenas antes do fechamento da janela atual do navegador;

localStorage: é sempre válido e sempre é salvo quando a janela ou o navegador é fechado, portanto, é usado como dados persistentes;

cookie: válido apenas até o tempo de expiração do cookie definido, mesmo que a janela seja fechada ou o navegador seja fechado
5) O escopo é diferente, o sessionStorage não é compartilhado em diferentes janelas do navegador, mesmo que seja a mesma página;

localstorage é compartilhado entre todas as janelas da mesma origem;

Os cookies também são compartilhados em todas as janelas da mesma origem
6) o armazenamento na web suporta um mecanismo de notificação de eventos, que pode enviar notificações de atualizações de dados aos ouvintes
7) a interface api do armazenamento na web é mais conveniente de usar

A diferença entre os objetos de dados sessionStorage e page js

1) O tempo de vida do objeto js geral na página só é válido na página atual, portanto, quando a página for atualizada ou alternada para outra página, os dados não existirão. 2) sessionStorage só precisa estar na mesma janela de a mesma fonte
, atualize a página ou entre em uma página diferente da mesma origem, os dados sempre existem, ou seja, enquanto o navegador não for fechado, os dados ainda existirão