javascript - localstorage - save in local storage jquery

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

Question

Mi caso: localStorage con clave + valor que debe eliminarse cuando el navegador está cerrado y no en una sola pestaña.

Por favor vea mi código si es apropiado y qué se puede mejorar:

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

Answer 1

¿Por qué no usar 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".

w3schools.com/html/html5_webstorage.asp

Answer 2

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 se esperaba (uso Google Chrome). Adaptado de: w3schools.com/html/html5_webstorage.asp .

Answer 3

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

Tuve el mismo problema. Estoy usando el módulo https://github.com/grevory/angular-local-storage 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. No necesitas hacer nada.

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

Espero que ayude.

Answer 4

Debe hacerse así y no con el operador de eliminación:

localStorage.removeItem(key);

Answer 5

Después de analizar esta pregunta 6 años después de la pregunta, descubrí que todavía no hay una respuesta suficiente para esta pregunta; que debe lograr todo lo siguiente:

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

Ejecute esta pieza de javascript al inicio de cada carga de página 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'');

Answer 6

En su lugar, debe usar sessionStorage si desea que la clave se elimine cuando se cierre el navegador.

Answer 7

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

$localStorage.$reset(); 

Answer 8

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 invalídelo si cierra la última pestaña restante. Si necesita que sus valores se guarden en tablas cruzadas y ventanas, sessionStorage no le ayuda a menos que complique su vida con los oyentes, como he intentado. Mientras tanto, localStorage sería perfecto para esto, pero hace el trabajo ''muy bien'', ya que sus datos estarán esperando allí incluso después de reiniciar el navegador. Terminé usando un código personalizado y una lógica que aprovecha ambos.

Prefiero explicarlo luego 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 aumentará cada vez que la página se cargue y disminuirá cada vez que la página se descargue. Puede elegir su elección de los eventos a utilizar, sugeriría ''cargar'' y ''descargar''. Al momento de descargar, debe realizar 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 forma confiable y genérica de diferenciar entre una recarga de página o la navegación dentro de la página y el cierre de la pestaña. Por lo tanto, si los datos que almacena no son algo que pueda reconstruir durante la carga después de verificar que esta es su primera pestaña, no podrá eliminarla 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 verificación para ver si ya tiene un valor y si no lo tiene, esto significa que se está cargando en esta sesión por primera vez, lo que significa que puede hacer la limpieza en carga si esto el valor no está establecido y el contador es 0

Answer 9

Intenta usar

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

Espero que esto funcione para usted

Answer 10

No creo que la solución presentada aquí sea 100% correcta porque se llama a window.onbeforeunload event no solo cuando el navegador / pestaña está cerrado (LO QUE SE REQUIERE), sino también en todos los demás eventos. (QUE NO PUEDE SER REQUERIDO)

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

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

Answer 11

Puede hacer uso del evento beforeunload en JavaScript.

Usando JavaScript de vainilla puedes hacer algo como:

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

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

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

Answer 12

Puedes probar el siguiente código para eliminar el almacenamiento local:

delete localStorage.myPageDataArr;

Answer 13

Utilizar con window global de palabras clave: -

 window.localStorage.removeItem(''keyName'');

Answer 14

usar 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 la cantidad 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.";

Answer 15

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