10

Tenho um determinado cenário no qual preciso que o usuário fique faça login e fique conectado por algum tempo. No entanto, caso for detectado inatividade na página depois de um tempo, talvez uns 20 min, expire o Local Storage invalidando as informações salvas.

Para definir um valor para um item eu uso o seguinte código:

localStorage.setItem('login', true);

Desta forma, o intuito é manter o usuário conectado até que ele faça logout manualmente usando o código abaixo:

localStorage.removeItem('login'); 

Como fazer para que o Local Storage expire depois de um determinado tempo de inatividade?

3 Respostas 3

12

Eu diria que se os valores são tão simples assim, o document.cookie já resolveria, mas ainda sim pode fazer isso como localStorage, o que pode fazer é criar um vetor em formato json (talvez) e definir nele uma data para limite.

E no começo da página, antes de tudo (nem de onload precisa) adicione algo como:

function localStorageExpires()
{
    var toRemove = [],                      // Itens para serem removidos
        currentDate = new Date().getTime(); // Data atual em milissegundos

    for (var i = 0, j = localStorage.length; i < j; i++) {
       var key = localStorage.key(i),
           value = localStorage.getItem(key);

       // Verifica se o formato do item para evitar conflitar com outras aplicações
       if (value && value[0] === "{" && value.slice(-1) === "}") {

            // Decodifica de volta para JSON
            var current = JSON.parse(value);

            // Checa a chave expires do item especifico se for mais antigo que a data atual ele salva no array
            if (current.expires && current.expires <= currentDate) {
                toRemove.push(key);
            }
       }
    }

    // Remove itens que já passaram do tempo
    // Se remover no primeiro loop isto poderia afetar a ordem,
    // pois quando se remove um item geralmente o objeto ou array são reordenados
    for (var i = toRemove.length - 1; i >= 0; i--) {
        localStorage.removeItem(toRemove[i]);
    }
}

localStorageExpires();//Auto executa a limpeza

/**
 * Função para adicionar itens no localStorage
 * @param {string} chave Chave que será usada para obter o valor posteriormente
 * @param {*} valor Quase qualquer tipo de valor pode ser adicionado, desde que não falhe no JSON.stringify
 * @param {number} Tempo de vida em minutos do item
 */
function setLocalStorage(chave, valor, minutos)
{
    var expirarem = new Date().getTime() + (60000 * minutos);

    localStorage.setItem(chave, JSON.stringify({
        "value": valor,
        "expires": expirarem
    }));
}

/**
 * Função para obter itens do localStorage que ainda não expiraram
 * @param {string} chave Chave para obter o valor associado
 * @return {*} Retorna qualquer valor, se o item tiver expirado irá retorna undefined
 */
function getLocalStorage(chave)
{
    localStorageExpires();//Limpa itens

    var value = localStorage.getItem(chave);

    if (value && value[0] === "{" && value.slice(-1) === "}") {

        // Decodifica de volta para JSON
        var current = JSON.parse(value);

        return current.value;
    }
}

Para usar chame assim:

// login é tua chave, true é teu valor e 25 são os minutos de vida
setLocalStorage('login', true, 25);

Para pegar use:

var login = getLocalStorage('login');

alert(login);
3
  • 1
    Parabéns pela abordagem. Por favor, atualize a função setLocalStorage. Falta um parênteses na declaração do setItem. 20/09/2019 às 11:05
  • Caro @jeff_drumgod obrigado mesmo. Já ajuste ;)
    – Syzoth
    20/09/2019 às 12:12
  • @jeff_drumgod obrigado!
    – Syzoth
    24/09/2019 às 23:57
1

Uma forma de realizar isto seria acrescentar na tela uma função que valida as atividades de mouse e teclas com um contador a cada minuto, caso ele não faça nenhum movimento nesse periodo de 20 minutos ele pode remover seu local Storage:

Segue o código em JQuery:

<script>
var tempo = 0;

$(document).ready(function () {
    //Valida  o Tempo incrementando o valor a cada 1 minuto, caso chegue a 20 sem atividade será eliminada
    var idleInterval = setInterval(ValidaTempo, 60000); // 60000 =  1 minuto

    //Caso o usuário mova o mouse na aplicação zera o contador
    $(this).mousemove(function (e) {
        tempo = 0;
    });
      //Caso o usuário pressione qualquer tecla na aplicação zera o contador
    $(this).keypress(function (e) {
        tempo = 0;
    });
});
//Função que acrescenta ao contador a cada minuto sem atividade e eliminando a local storage.
function ValidaTempo() {
    //Acrescenta cada minuto sem atividade
    tempo = tempo + 1;
    //Caso o tempo seja maior que 19 minutos ele encerra a sessão 
    if (tempo > 19) { // 20 minutos
        localStorage.removeItem('login'); 
        //redireciona login
    }
}

Espero que possa ter ajudado. ;)

2
  • Pelo que percebi, esse código só funciona se minha página estiver aberta. Caso eu faça login e saia da página, se eu voltar depois de um tempo a não vai ter removido o item do localStorage. Talvez não solucione totalmente o problema.
    – viana
    23/01/2017 às 13:31
  • @AckLay, para este caso não seria melhor trocar sua abordagem ao inves de localstorage para sessionStorage ? 23/01/2017 às 13:44
0

Infelizmente não existe um atributo que remova o item do localStorage quando expirar.

Existe diferentes formas de fazer isso, se você estiver utilizando o AngularJS 1.X você pode fazer algo desta forma:

app.run(function($interval){
  $interval( function(){
    delete localStorage[key];
    //remove todos os objetos com a 'key' informada.
  }, 1000*60*20);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .