Armazenamento de navegador de jornada de descriptografia de JavaScript: cookie, sessionStorage e localStorage

Resumo de vários métodos de cache de navegador comumente usados ​​e uso

Para resumir agora, uma comparação simples é feita para cookie, localStorage e sessionStorage.

Diferença de contraste

característica	bolacha	localStorage	sessionStorge
Tamanho de armazenamento	4k	5M (diferente dependendo do navegador)	5M (diferente dependendo do navegador)
Método de acesso	Fragmento	String (tradução JSON)	String (tradução JSON)
Comunicação do servidor	Carregar cabeçalho	Sem comunicação	Sem comunicação
ciclo da vida	Geração de servidor, tempo de expiração pode ser definido	Sempre existe, a menos que seja limpo	Navegador fechado e vazio
Cenários de aplicação	Identifique a identidade do usuário, execute o rastreamento da sessão	Guarde os dados de todo o site por um longo tempo	Salve dados temporariamente na mesma janela (ou guia)

Introdução detalhada

• bolacha
  1. Os cookies são freqüentemente usados ​​para autenticar usuários nos pontos frontal e traseiro e marcar usuários. Como o http é um protocolo sem estado (sem memória), para resolver o problema de memória http, a sessão é usada para gerenciar os cookies.
  2. A sessão irá definir um cabeçalho de resposta Set-Cookie no lado do servidor; o cliente irá recebê-lo e o navegador irá trazer automaticamente o cabeçalho da solicitação de Cookie após o envio da solicitação. O armazenamento excessivo da sessão não se expandirá
  3. Extraia a sessão e armazene-a centralmente.
  4. O serviço não precisa ser armazenado e pode determinar se deve efetuar login analisando as informações no token. O token pode transportar informações analisadas pelo cookie
• coolie - código

// sessionId通常存放在cookie当中   会话由浏览器控制 会话结束 session失效
  u.cookie = {
    
    }
  //设置cookie
  u.cookie.set = function(name, value, expiredays) {
    
    
   var expires = ''
   if (expiredays) {
    
    
       var exdate = new Date()
       exdate.setTime(exdate.getTime() + expiredays * (24 * 3600 * 1000))
       expires = ';expires=' + exdate.toUTCString()
   }
   document.cookie = name + '=' + escape(value) + expires
}
  //获取cookie
u.cookie.get = function(name) {
    
    
   var arr = document.cookie.split('; ')
   for (var i = 0; i < arr.length; i++) {
    
    
       var temp = arr[i].split('=')
       if (temp[0] === name) return unescape(temp[1])
   }
   return null
}
// 删除cookie
u.cookie.remove = function(name) {
    
    
   u.cookie.set(name, '', -1)
}

• localStorage 、 sessionStroage
  1. Usado para salvar temporariamente os dados da mesma janela (ou guia), que serão excluídos após o fechamento da janela ou guia
  2. Métodos de armazenamento de objetos:
     javascript localStorage.setItem('cartInfor',JSON.stringify(data));
  3. Método para recuperar objetos de armazenamento local
     javascript JSON.parse(localStorage.getItem("cartInfor"))
• localStorage / sessionStroage-code é
  compatível com android, setItem () suporta método de objeto de armazenamento

u.storage = {
    
    };
//获取localStorage对象，兼容android（android原生系统老系统不支持localstorage）
function uzStorage() {
    
    
    var ls = window.localStorage;
    var isAndroid = (/android/gi).test(window.navigator.appVersion);
    if (isAndroid) ls = os.localStorage();
    return ls;
}
// 设置本地储存
u.storage.set = function (key, value) {
    
    
    var v = value;
    if (typeof v === 'object') {
    
    
        v = JSON.stringify(v);
        v = 'obj-' + v;
    }
    var ls = uzStorage();
    if (ls) ls.setItem(key, v);
};
//获取本地储存
u.storage.get = function (key) {
    
    
    var ls = uzStorage();
    if (ls) {
    
    
        var v = ls.getItem(key);
        if (!v) return;
        if (v.indexOf('obj-') === 0) return JSON.parse(v.slice(4));
        else return v;
    }
};
//删除本地储存中的某些数据
u.storage.remove = function (key) {
    
    
    var ls = uzStorage();
    if (ls && key) ls.removeItem(key);
};
// 清空本地储存所有数据
u.storage.clear = function () {
    
    
    var ls = uzStorage();
    if (ls) ls.clear();
};

Resumindo

Para cookies, sessionStorage, etc., geralmente há componentes encapsulados na estrutura de front-end, como vue-ls, js-cookie, etc. em vue. O conhecimento é vivo e aprendido, e depois de conhecer o princípio, é melhor para otimizar e melhorar seu nível de código.