Como remover um item de localização quando a janela/Página do navegador está fechada?

Você pode fazer uso do evento beforeunload em JavaScript.

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

Isso irá apagar a chave antes da janela/Página do navegador estar fechada e pede-lhe para confirmar a acção fechar a janela/Página. Espero que isso resolva o teu problema.

Nota: O Método onbeforeunload deve devolver uma cadeia de caracteres.

Utilizar com window palavra-chave global: -

 window.localStorage.removeItem('keyName');

Em vez disso, deve usar o suporte da sessão se quiser que a chave seja apagada quando o navegador fechar.

Tenta usar

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

Existe um caso de Utilização muito específico em que qualquer sugestão de usar a porta de sessão em vez da porta local não ajuda realmente. O caso de uso seria algo tão simples como ter algo armazenado enquanto você tem pelo menos uma aba aberta, mas invalidá-lo se você fechar a última aba restante. Se você precisa que seus valores sejam salvos cross-tab E window, sessionStorage não o ajuda a menos que você complique sua vida com os ouvintes, como eu tentei. Entretanto, a localização local seria perfeito para isso, mas ele faz o trabalho 'muito bem', uma vez que seus dados estarão esperando lá mesmo após um reinício do navegador. Acabei por usar um código personalizado e lógica que se aproveita de ambos.

Utilizar sessionStorage

O objecto de sessionStorage é igual ao objecto localStorage, excepto que armazena os dados para apenas uma sessão. Os dados são apagados quando o usuário fecha a janela do navegador.

O seguinte exemplo conta o número de vezes que um utilizador carregou num botão, na sessão actual:

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.";

Aqui está um teste simples para ver se você tem suporte de navegador ao trabalhar com o 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 comigo como esperado (Eu uso o Google Chrome). Adaptado de: http://www.w3schools.com/html/html5_webstorage.asp.

Não acho que a solução aqui apresentada seja 100% correcta porque a janela.onbeforeunload event is called not only when browser/Tab is closed (WHICH IS REQUIRED), but also on all other several events. (QUE PODE NÃO SER NECESSÁRIO)

Veja este link para mais informações sobre a lista de eventos que podem disparar a janela.onbefore unload: -

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

Porque não usar o suporte da sessão?

" o objecto de sessionStorage é igual ao objecto localStorage, excepto que armazena os dados para apenas uma sessão. Os dados são apagados quando o usuário fecha a janela do navegador."

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

Embora alguns utilizadores já tenham respondido a esta pergunta, estou a dar um exemplo de configurações de aplicação para resolver este problema.

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

        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]);
      }

• limpar o armazenamento Local após fechar o navegador (ou todas as páginas do domínio)
• preservar o armazenamento Local através das páginas, se pelo menos uma das páginas permanecer activa
• preservar a Armazenagem Local ao carregar uma única página

Execute este pedaço de javascript no início de cada carregamento de páginas em a fim de alcançar o acima exposto:

((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');

Pode tentar o seguinte código para remover o armazenamento local:

delete localStorage.myPageDataArr;

Isto vai funcionar como um encanto se u estiver a usar AngularJS

$localStorage.$reset();