javascript - recorrer - modificar html con jquery

Cómo obtener JS variable para retener el valor después de la actualización de la página?

Question

Esta pregunta ya tiene una respuesta aquí:

• Persistir variables entre carga de página 4 respuestas

¿Es posible cambiar permanentemente una variable de JavaScript? Como en, si configuro la variable X y la hago igual a 1. Entonces al hacer clic en un botón, la cambio a 2. ¿Cómo puedo conseguir que esa variable permanezca en 2 al actualizar la página?

Answer 1

Además de cookies y localStorage , hay al menos otro lugar donde puede almacenar datos de clientes "semi-persistentes": window.name . Cualquier valor de cadena que asigne a window.name permanecerá allí hasta que se cierre la ventana.

Para probarlo, simplemente abra la consola y escriba window.name = "foo" , luego actualice la página y escriba window.name ; debería responder con foo .

Esto es un poco complicado, pero si no quiere que las cookies se llenen con datos innecesarios al servidor con cada solicitud, y si no puede usar localStorage por localStorage motivo (clientes heredados), puede ser una opción considerar.

window.name tiene otra propiedad interesante: es visible para ventanas servidas desde otros dominios; no está sujeto a la misma política de origen como casi cualquier otra propiedad de la window . Por lo tanto, además de almacenar datos "semi-persistentes" allí mientras el usuario navega o actualiza la página, también puede usarla para la comunicación entre dominios sin CORS.

Tenga en cuenta que window.name solo puede almacenar cadenas, pero con la amplia disponibilidad de JSON , esto no debería ser un gran problema, incluso para datos complejos.

Answer 2

Puede hacerlo almacenando cookies en el lado del cliente.

Answer 3

Tendrá que usar cookies para almacenar el valor en la actualización de la página. Puede usar cualquiera de las muchas bibliotecas de cookies basadas en JavaScript para simplificar el acceso a las cookies, como este

Si solo quieres admitir html5, puedes pensar en Storage api como localStorage / sessionStorage

https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage : utilizando https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage y la biblioteca de cookies

var mode = getStoredValue(''myPageMode'');

function buttonClick(mode) {
    mode = mode;
    storeValue(''myPageMode'', mode);
}

function storeValue(key, value) {
    if (localStorage) {
        localStorage.setItem(key, value);
    } else {
        $.cookies.set(key, value);
    }
}

function getStoredValue(key) {
    if (localStorage) {
        return localStorage.getItem(key);
    } else {
        return $.cookies.get(key);
    }
}

Answer 4

Esto es posible con window.localStorage o window.sessionStorage . La diferencia es que sessionStorage dura mientras el navegador permanezca abierto, localStorage sobrevive después de reinicios del navegador. La persistencia se aplica a todo el sitio web, no solo a una página.

Cuando necesite establecer una variable que debe reflejarse en la (s) siguiente (s) página (s), use:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

Y en cualquier página (como cuando la página se cargó), obténgala como:

var someVarName = localStorage.getItem("someVarKey");

.getItem() devolverá null si no hay ningún valor almacenado, o el valor almacenado.

Tenga en cuenta que solo los valores de cadena se pueden almacenar en este almacenamiento, pero esto puede superarse utilizando JSON.stringify y JSON.parse . Técnicamente, siempre que llame a .setItem() , llamará a .toString() en el valor y lo almacenará.

La guía de almacenamiento de DOM de MDN (vinculada a continuación), tiene soluciones alternativas / polyfills, que terminan localStorage a cosas como cookies, si localStorage no está disponible.

No sería una mala idea usar una mini biblioteca existente, o crear su propia, que abstraiga la capacidad de guardar cualquier tipo de datos (como literales de objetos, matrices, etc.).

Referencias

• Storage navegador - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
• JSON - https://developer.mozilla.org/en-US/docs/JSON
• Compatibilidad con el almacenamiento del navegador - http://caniuse.com/namevalue-storage
• Almacenamiento de objetos: almacenamiento de objetos en HTML5 localStorage