Home / Questions / 59243
Accepted
Lorthas
Asked: 2020-03-31 10:26:33 +0800 CST 2020-03-31 10:26:33 +0800 CST

Persistently save values ​​in variables between loads of the same page or across different pages in Javascript? [closed]

  • 772

As saving variables globally is not recommended, how could I save values ​​in variables that are persistently maintained when loading the same page several times or when going to other pages and that the variable is not deleted?

For example, I store a private variable inside a module where I want to save or cache some values ​​to have them later available.

            const mod = (function() {

                let privada = "foo";

                return {
                    v: "hola",
                    f: () => {
                        console.log(mod.v);
                        console.log(privada);
                        v = "mundo";
                        privada = "bar";
                    }
                };

            }());

            mod.f();

It's a pretty simple example but when reloading the page the variable has been re-initialized.

What would be the best way to be able to save variables in a private and persistent way, if possible? If it can't be done privately at least let me save it persistently?

javascript

1 Answers

  1. Best Answer

    Using Local Storage, it would be something like this:

    NOTE: Doesn't work here... in this editor but you can try this example

    /*Igualando la variable con el valor de la caja de texto y guardándola en localStorage*/
var key = "Nombre";
//localStorage["Nombre"] = "algo";
localStorage.setItem(key, "algo");
$("#mostrar").click(function(){
  //Las dos formas son validas, es mas recomendable la segunda
  //$("#info").text(localStorage["Nombre"]);//Version 1
  $("#info").text(localStorage.getItem(key));//Version 2
  
localStorage.setItem(key, data);
});

$("#save").click(function(){
  //localStorage["Nombre"] = $("#nombre").val();//Version 1
  localStorage.setItem(key, data);//Version 2
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="nombre"/>

<br>
<button id="save">Guardar Local Storage</button>

<br>
<br>
<button id="mostrar">Consultar Local Storage</button>
<br>
<div id="info"></div>

    Example with cookies:

    function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

var key = "Nombre";

$("#save").click(function(){
  var nombre = $("#nombre").val();
  setCookie(key,nombre,1);//Cookie durará 1 dia
});


$("#mostrar").click(function(){
  $("#nombre").val(getCookie(key));
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="nombre"/>

<br>
<button id="save">Guardar Cookie</button>

<br>
<br>
<button id="mostrar">Consultar Cookie</button>
<br>
<div id="info"></div>

    See example here

    • 1