O navegador Vue armazena em cache sessionStorage+localStorage+Cookie

Índice

sessãoArmazenamento

Introdução

método

exemplo de código

Acesse dados individuais

objeto de acesso

apagar os dados

armazenamento local

Introdução

método

exemplo de código

Introdução

método

exemplo de código

a diferença

A diferença entre sessionStorage e localStorage

A diferença entre sessionStorage, localStorage e cookie


sessãoArmazenamento

Introdução

   - sessionStorage é usado para armazenar dados durante uma sessão do navegador, e os dados só são válidos durante a sessão atual.
   - Os dados armazenados serão apagados quando o usuário fechar a aba ou janela do navegador.

método

  • Use o método sessionStorage.setItem(key, value) para armazenar dados em sessionStorage.
  • Use o método sessionStorage.getItem(key) para obter o valor armazenado com base na chave.
  • Use o método sessionStorage.removeItem(key) para remover valores armazenados com base na chave.

exemplo de código

列表页搜索条件缓存, 使用sessionStorage实现简单的功能, 

存储数据+读取数据+清除数据

Acesse dados individuais

sessionStorage.setItem("param", "我叫你一声你敢答应吗?");

let param = sessionStorage.getItem("param")

console.log(param ); // => 我叫你一声你敢答应吗?

objeto de acesso

sessionStorage也可存储Json对象:

存储时,通过JSON.stringify()将对象转换为文本格式;

读取时,通过JSON.parse()将文本转换回对象。

sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));

if (sessionStorage.getItem("queryParams")) {
  this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
}

apagar os dados

sessionStorage.removeItem("queryParams");

armazenamento local

Introdução

   - localStorage é usado para armazenar dados permanentemente no navegador, mesmo que o usuário feche a aba ou janela do navegador, os dados permanecem.
   - Os dados armazenados não expiram automaticamente, a menos que sejam explicitamente removidos do código ou que o usuário limpe o cache do navegador.

   - O tamanho dos dados de armazenamento é geralmente de 5 MB;

   - Salva apenas no navegador e não participa da comunicação do servidor;

método

  •     Use o método localStorage.setItem(key, value) para armazenar dados em localStorage.
  •     Use o método localStorage.getItem(key) para obter o valor armazenado com base na chave.
  •     Use o método localStorage.removeItem(key) para remover um valor armazenado com base em uma chave.

exemplo de código

// 设置localStorage中的数据
localStorage.setItem('key', 'value');

// 获取localStorage中的数据
const value = localStorage.getItem('key');
console.log(value);  // 输出:value

// 删除localStorage中的数据
localStorage.removeItem('key');

biscoito

Introdução

  • Cookies são um mecanismo que armazena dados em seu navegador para rastrear e identificar usuários.
  • Você pode definir o tempo de expiração do cookie para que os dados se tornem inválidos após o tempo especificado.
  • Mesmo que o utilizador feche o navegador, os dados armazenados no cookie podem ser retidos, a menos que seja definido um prazo de validade.

método

  • Use a propriedade document.cookie para definir e obter valores de cookies.
  • Use a sintaxe document.cookie = "key=value; expires=expiration_time; path=/;" para definir cookies.
  • Use document.cookie para obter todos os valores dos cookies.
  • Use a sintaxe document.cookie = "key=; expires=expiration_time; path=/;" para excluir cookies.

exemplo de código

// 设置cookie
document.cookie = "key=value; expires=expiration_time; path=/;";

// 获取所有cookie
const cookies = document.cookie;
console.log(cookies);

// 删除cookie
document.cookie = "key=; expires=expiration_time; path=/;";

a diferença

这些存储机制各有优劣和适用场景。

sessionStorage适用于在会话期间保持数据,
localStorage适用于需要永久存储数据的场景,
而Cookie用于跟踪用户和设置过期时间的需求。

根据具体的应用需求,选择适合的存储机制可以更好地管理和存储数据。

A diferença entre sessionStorage e localStorage

  • sessionStorage é válido durante uma sessão do navegador, enquanto localStorage é persistente.
  • sessionStorage será limpo quando o usuário fechar a aba ou janela do navegador, enquanto localStorage sempre será retido.
  • Os métodos de uso de sessionStorage e localStorage são semelhantes, todos usam os métodos setItem, getItem e removeItem para operar.

A diferença entre sessionStorage, localStorage e cookie

  • sessionStorage é válido durante a sessão do navegador, localStorage é persistente e os cookies podem definir tempos de expiração.
  • A capacidade de armazenamento de sessionStorage e localStorage é geralmente muito maior que a de Cookie.
  • Os métodos de uso de sessionStorage e localStorage são semelhantes, ambos usam os métodos setItem, getItem e removeItem para operar, enquanto Cookie usa o atributo document.cookie.
  • sessionStorage e localStorage podem armazenar apenas dados do tipo string, enquanto os cookies podem armazenar string, número, booleanos e outros tipos de dados.

Por favor, curta se for útil e desenvolva bons hábitos!

Por favor, deixe uma mensagem para perguntas, comunicação e incentivo!

Acho que você gosta

Origin blog.csdn.net/libusi001/article/details/128962297
Recomendado
Clasificación