¿Cómo eliminar un elemento localStorage cuando la ventana/pestaña del navegador está cerrada?

Puede hacer uso del evento beforeunload en JavaScript.

Usando JavaScript vanilla podrías hacer algo como:

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

Que eliminará la clave antes de que se cierre la ventana/pestaña del navegador y le pedirá que confirme la acción cerrar ventana/pestaña. Espero que eso resuelva tu problema.

NOTA: El método onbeforeunload debe devolver una cadena.

Usar con window palabra clave global: -

 window.localStorage.removeItem('keyName');

Debe usar sessionStorage en su lugar si desea que la clave se elimine cuando se cierre el navegador.

Intenta usar

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

Espero que esto funcione para usted

Hay un caso de uso muy específico en el que cualquier sugerencia de usar sessionStorage en lugar de localStorage realmente no ayuda. El caso de uso sería algo tan simple como tener algo almacenado mientras tiene al menos una pestaña abierta, pero lo invalida si cierra la última pestaña restante. Si necesita que sus valores se guarden entre pestañas y ventanas, sessionStorage no lo ayuda a menos que complique su vida con los oyentes, como he intentado. Mientras tanto, el almacenamiento local sería perfecto para esto, pero hace el trabajo 'demasiado bien', ya que sus datos estarán esperando allí incluso después de un reinicio del navegador. Terminé usando un código personalizado y lógica que se aprovecha de ambos.

Prefiero explicar que dar código. Primero almacene lo que necesita en localStorage, luego también en localStorage cree un contador que contendrá el número de pestañas que ha abierto. Esto se incrementará cada vez que se cargue la página y disminuirá cada vez que se descargue la página. Puedes tener su elección aquí de los eventos a utilizar, yo sugeriría 'cargar' y 'descargar'. En el momento de descargar, debe hacer las tareas de limpieza que le gustaría cuando el contador llegue a 0, lo que significa que está cerrando la última pestaña. Aquí viene la parte difícil: No he encontrado una manera confiable y genérica de diferenciar entre una recarga de página o navegación dentro de la página y el cierre de la pestaña. Entonces, si los datos que almacena no son algo que pueda reconstruir al cargar después de verificar que este es el primero pestaña, entonces no se puede eliminar en cada actualización. En su lugar, debe almacenar un indicador en sessionStorage en cada carga antes de aumentar el contador de pestañas. Antes de almacenar este valor, puede hacer una comprobación para ver si ya tiene un valor y si no lo tiene, esto significa que está cargando en esta sesión por primera vez, lo que significa que puede hacer la limpieza en load si este valor no está establecido y el contador es 0.

Use sessionStorage

El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola sesión. Los datos se eliminan cuando el usuario cierra la ventana del navegador.

El siguiente ejemplo cuenta el número de veces que un usuario ha hecho clic en un botón, en la sesión actual:

Ejemplo

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

Aquí hay una prueba simple para ver si tiene soporte de navegador cuando trabaja con almacenamiento 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..");
}

Funcionó para mí como era de esperar (uso Google Chrome). Adaptado de: http://www.w3schools.com/html/html5_webstorage.asp.

No creo que la solución presentada aquí sea 100% correcta porque window.el evento onbeforeunload se llama no solo cuando el navegador / Tab está cerrado (LO CUAL ES OBLIGATORIO), sino también en todos los demás eventos. (QUE PUEDE NO SER NECESARIO)

Consulte este enlace para obtener más información sobre la lista de eventos que pueden disparar la ventana.onbeforeunload: -

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

¿Por qué no se utiliza sessionStorage?

"El objeto sessionStorage es igual al objeto localStorage, excepto que almacena los datos para una sola sesión. Los datos se eliminan cuando el usuario cierra la ventana del navegador."

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

Aunque algunos usuarios ya respondieron a esta pregunta, estoy dando un ejemplo de configuración de la aplicación para resolver este problema.

Tuve el mismo problema. Estoy usando https://github.com/grevory/angular-local-storage módulo en mi aplicación angularjs. Si configura su aplicación de la siguiente manera, guardará la variable en el almacenamiento de sesión en lugar del almacenamiento local. Por lo tanto, si cierra el navegador o cierra la pestaña, el almacenamiento de la sesión se eliminará automáticamente. Usted no necesita para hacer cualquier cosa.

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

Espero que ayude.

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

Después de mirar esta pregunta 6 años después de que se hizo, encontré que todavía no hay respuesta suficiente a esta pregunta; que debería lograr todo lo siguiente:

• Borrar el almacenamiento local después de cerrar el navegador (o todas las pestañas del dominio)
• Preservar el almacenamiento local a través de pestañas, si al menos una pestaña permanece activa
• Conservar el almacenamiento local al recargar una sola pestaña

Ejecute esta pieza de javascript al inicio de cada carga de página en orden para lograr lo anterior:

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

Puede intentar el siguiente código para eliminar el almacenamiento local:

delete localStorage.myPageDataArr;

Esto funcionará como un encanto si u está usando AngularJS

$localStorage.$reset();