Como excluir um item localStorage quando a janela / guia do navegador está fechada?

Meu caso: localStorage com chave + valor que deve ser excluído quando o navegador estiver fechado e não em uma única guia.

Por favor, veja meu código se for adequado e o que pode ser melhorado:

//create localStorage key + value if not exist
if(localStorage){
   localStorage.myPageDataArr={"name"=>"Dan","lastname"=>"Bonny"}; 
}

//when browser closed - psedocode
$(window).unload(function(){
  localStorage.myPageDataArr=undefined;
});

deve ser feito assim e não com o operador delete:

localStorage.removeItem(key);

Use com windowa palavra-chave global: -

 window.localStorage.removeItem('keyName');

Você pode fazer uso do beforeunloadevento em JavaScript.

Usando o vanilla JavaScript, você pode fazer algo como:

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

Isso excluirá a chave antes que a janela / guia do navegador seja fechada e solicitará que você confirme a ação de fechar a janela / guia. Espero que isso resolva seu problema.

NOTA: O onbeforeunloadmétodo deve retornar uma string.

Você deve usar o sessionStorage se desejar que a chave seja excluída quando o navegador fechar.

Tente usar

$(window).unload(function(){
  localStorage.clear();
});

Espero que funcione para voce

Há um caso de uso muito específico no qual qualquer sugestão para usar sessionStorage em vez de localStorage realmente não ajuda. O caso de uso seria algo tão simples quanto ter algo armazenado enquanto você tiver pelo menos uma guia aberta, mas a invalidará se você fechar a última guia restante. Se você precisar que seus valores sejam salvos em guias e janelas, o sessionStorage não o ajudará, a menos que você complique sua vida com os ouvintes, como eu tentei. Enquanto isso, o localStorage seria perfeito para isso, mas faz o trabalho "muito bem", pois seus dados estarão esperando lá, mesmo após a reinicialização do navegador. Acabei usando um código e uma lógica personalizados que aproveitam os dois.

Prefiro explicar do que dar código. Primeiro armazene o que você precisa no localStorage e, em seguida, também no localStorage, crie um contador que conterá o número de guias que você abriu. Isso será aumentado toda vez que a página for carregada e diminuído toda vez que a página for descarregada. Você pode escolher aqui os eventos a serem usados, eu sugiro 'carregar' e 'descarregar'. No momento em que você descarrega, você precisa executar as tarefas de limpeza que deseja quando o contador chegar a 0, o que significa que você está fechando a última guia. Aí vem a parte complicada: eu não encontrei uma maneira confiável e genérica de diferenciar uma recarga ou navegação de página dentro da página e o fechamento da guia. Portanto, se os dados armazenados não forem algo que você possa reconstruir em carga após verificar se esta é sua primeira guia, não será possível removê-lo a cada atualização. Em vez disso, você precisa armazenar um sinalizador no sessionStorage a cada carregamento antes de aumentar o contador de guias. Antes de armazenar esse valor, você pode verificar se ele já possui um valor e, caso contrário, isso significa que você está carregando nesta sessão pela primeira vez, o que significa que você pode fazer a limpeza em carga, se isso o valor não está definido e o contador é 0.

use sessionStorage

O objeto sessionStorage é igual ao objeto localStorage, exceto que ele armazena os dados para apenas uma sessão. Os dados são excluídos quando o usuário fecha a janela do navegador.

O exemplo a seguir conta o número de vezes que um usuário clicou em um botão na sessão atual:

Exemplo

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

for (let i = 0; i < localStorage.length; i++) {
    if (localStorage.key(i).indexOf('the-name-to-delete') > -1) {
        arr.push(localStorage.key(i));
    }
}

for (let i = 0; i < arr.length; i++) {
    localStorage.removeItem(arr[i]);
}

localStorage.removeItem(key);  //item

localStorage.clear(); //all items

Embora alguns usuários já tenham respondido a essa pergunta, estou fornecendo um exemplo de configurações de aplicativo para resolver esse problema.

Eu tive o mesmo problema. Estou usando o módulo https://github.com/grevory/angular-local-storage no meu aplicativo angularjs. Se você configurar seu aplicativo da seguinte maneira, ele salvará a variável no armazenamento da sessão em vez do armazenamento local. Portanto, se você fechar o navegador ou a guia, o armazenamento da sessão será removido automaticamente. Você não precisa fazer nada.

app.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
  .setPrefix('myApp')
  .setStorageType('sessionStorage')
});

Espero que ajude.

Existem cinco métodos para você escolher:

• setItem (): adiciona chave e valor ao localStorage
• getItem (): recupera um valor pela chave de localStorage
• removeItem (): remove um item por chave do localStorage
• clear (): Limpar tudo localStorage
• key (): passou um número para recuperar a enésima chave de um localStorage

Você pode usar clear (), esse método, quando chamado, limpa todo o armazenamento de todos os registros desse domínio. Não recebe nenhum parâmetro.

window.localStorage.clear();

Aqui está um teste simples para verificar se você possui suporte ao navegador ao trabalhar com armazenamento local:

if(typeof(Storage)!=="undefined") {
  console.log("localStorage and sessionStorage support!");
  console.log("About to save:");
  console.log(localStorage);
  localStorage["somekey"] = 'hello';
  console.log("Key saved:");
  console.log(localStorage);
  localStorage.removeItem("somekey");  //<--- key deleted here
  console.log("key deleted:");
  console.log(localStorage);
  console.log("DONE ===");
} else {
  console.log("Sorry! No web storage support..");
}

Funcionou para mim como esperado (eu uso o Google Chrome). Adaptado de: http://www.w3schools.com/html/html5_webstorage.asp .

Eu não acho que a solução apresentada aqui seja 100% correta, porque o evento window.onbeforeunload é chamado não apenas quando o navegador / guia está fechado (O QUE É NECESSÁRIO), mas também em todos os outros eventos. (QUE PODE NÃO SER NECESSÁRIO)

Consulte este link para obter mais informações sobre a lista de eventos que podem disparar window.onbeforeunload: -

http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

por que não usou sessionStorage?

"O objeto sessionStorage é igual ao objeto localStorage, exceto que ele armazena os dados para apenas uma sessão. Os dados são excluídos quando o usuário fecha a janela do navegador."

http://www.w3schools.com/html/html5_webstorage.asp

Depois de analisar esta questão seis anos depois de ter sido feita, descobri que ainda não há resposta suficiente para essa pergunta; que deve atingir todos os seguintes itens:

• Limpar armazenamento local após fechar o navegador (ou todas as guias do domínio)
• Preservar armazenamento local nas guias, se pelo menos uma guia permanecer ativa
• Preservar armazenamento local ao recarregar uma única guia

Execute este javascript no início de cada carregamento da página para alcançar o seguinte:

((nm,tm) => {
    const
            l = localStorage,
            s = sessionStorage,
            tabid = s.getItem(tm) || (newid => s.setItem(tm, newid) || newid)((Math.random() * 1e8).toFixed()),
            update = set => {
                let cur = JSON.parse(l.getItem(nm) || '{}');
                if (set && typeof cur[tabid] == 'undefined' && !Object.values(cur).reduce((a, b) => a + b, 0)) {
                    l.clear();
                    cur = {};
                }
                cur[tabid] = set;
                l.setItem(nm, JSON.stringify(cur));
            };
    update(1);
    window.onbeforeunload = () => update(0);
})('tabs','tabid');

Edit: A idéia básica aqui é a seguinte:

1. Ao iniciar do zero, o armazenamento da sessão recebe um ID aleatório em uma chave chamada tabid
2. O armazenamento local é então definido com uma chave chamada tabscontendo um objeto que essas chavestabid é definida como 1.
3. Quando a guia é descarregada, o armazenamento local tabsé atualizado para um objeto que contémtabid definido como 0.
4. Se a guia for recarregada, ela é descarregada primeiro e retomada. Como a chave de armazenamento da sessão tabidexiste, a tabschave de armazenamento local também possui uma subchave detabid do armazenamento local também não é limpa.
5. Quando o navegador é descarregado, todo o armazenamento da sessão será limpo. Ao retomar a sessão, o armazenamento tabidnão existe mais e um novo tabidserá gerado. Como o armazenamento local não possui uma subchave para isso tabid, nem qualquer outrotabid (todas as sessões foram fechadas), é limpo.
6. Em uma nova guia criada, uma nova tabidé gerada no armazenamento da sessão, mas como existe pelo menos um tabs[ tabid], o armazenamento local não é limpo

Esta é uma pergunta antiga, mas parece que nenhuma das respostas acima é perfeita.

Caso deseje armazenar autenticação ou qualquer informação confidencial que seja destruída apenas quando o navegador estiver fechado, você poderá confiar sessionStorageelocalStorage passagem de mensagens entre guias para isso.

Basicamente, a ideia é:

1. Você inicializar a partir de qualquer guia anterior abriu, assim, tanto o seu localStoragee sessionStorageestão vazias (se não, você pode limpar a localStorage). Você precisará registrar um ouvinte de evento de mensagem nolocalStorage .
2. O usuário autentica / cria uma informação confidencial nesta guia (ou em qualquer outra guia aberta no seu domínio).
3. Você atualiza o sessionStoragearquivo para armazenar as informações confidenciais e usa-o localStoragepara armazenar essas informações e, em seguida, exclui-as (você não se importa com o tempo aqui, pois o evento estava na fila quando os dados foram alterados). Qualquer outra guia aberta naquele momento será chamada de volta no evento da mensagem e atualizará seussessionStorage com as informações confidenciais.
4. Se o usuário abrir uma nova guia no seu domínio, ela sessionStorageficará vazia. O código terá que definir uma chave no localStorage(por exemplo:) req. Qualquer outra guia (todas) será chamada de volta no evento de mensagem, veja essa chave e poderá responder com as informações sigilosas sessionStorage(como em 3), se houver.

Observe que esse esquema não depende de window.onbeforeunloadeventos frágeis (já que o navegador pode ser fechado / travado sem que esses eventos sejam acionados). Além disso, o tempo em que as informações confidenciais são armazenadas nolocalStorage é muito pequeno (já que você depende da detecção de alterações transcendentes para o evento de mensagem entre guias), portanto, é improvável que essas informações sensíveis vazem no disco rígido do usuário.

Aqui está uma demonstração desse conceito: http://jsfiddle.net/oypdwxz7/2/

Não existe uma maneira de detectar o fechamento do navegador; portanto, provavelmente você não pode excluir o localStorage no fechamento do navegador, mas há outra maneira de lidar com as coisas que você pode usar com o sessionCookies, pois ele destruirá após o fechamento do navegador. Isso foi implementado no meu projeto.

Você pode simplesmente usar o sessionStorage. Como o sessionStorage permite limpar todos os valores-chave quando a janela do navegador for fechada.

Veja lá: SessionStorage- MDN

você pode tentar o seguinte código para excluir o armazenamento local:

delete localStorage.myPageDataArr;