Utilisation de Localstorage pour stocker et récupérer des variables javascript d'une page html à l'autre (DOM)

Question

J'ai une page html 1.html et je veux récupérer du contenu textuel et le stocker dans un fichier js.js en utilisant jquery pour obtenir le texte par id.

Ce code ne fonctionne que dans 1.html page, où le texte que je veux copier est mais no sur 2.html fichier.

Voici mon code. Notez que cela fonctionne si je stocke le texte dans le second paramètre du setter localstorage.

 $( document ).ready(function() {
         var c1Title= $('#r1c1Title').text();

//changing c1Title to any String content like "test" will work

    localStorage.setItem("t1",c1Title);
        var result = localStorage.getItem("t1");

        $("#title1").html(result);
        alert(result);
    });

Voici la démo complète sur laquelle je travaille Github :

Answer 1

Vous devez utiliser soit localStorage ou cookies .

Avec localStorage

Sur la première page, utilisez le code suivant :

localStorage.setItem("variableName", "variableContent")

Cela définit une variable localStorage de variableName pour le domaine, avec le contenu variableContent . Vous pouvez changer ces noms et ces valeurs comme vous le souhaitez, ils ne sont utilisés qu'à titre d'exemple.

Sur la deuxième page, récupérez la valeur en utilisant le code suivant :

localStorage.getItem("variableName")

Cela renverra la valeur stockée dans variableName qui est variableContent .

Notes

• La quantité de données que vous pouvez stocker dans localStorage est limitée à 5 Mo.
• Vous pouvez supprimer des éléments en utilisant localStorage.removeItem("variableName") .
• Selon l'endroit où vous vous trouvez, vous devrez peut-être jeter un coup d'œil au politique en matière de cookies (cela concerne toutes les formes de sites web stockant des données sur un ordinateur, et pas seulement les cookies). C'est important, car sinon l'utilisation de l'une de ces solutions peut être illégale.
• Si vous ne souhaitez stocker des données que jusqu'à ce que l'utilisateur ferme son navigateur, vous pouvez utiliser sessionStorage à la place (il suffit de modifier le paramètre localStorage a sessionStorage dans toutes les instances de votre code)
• Si vous voulez être en mesure d'utiliser la valeur de la variable sur le serveur également, utilisez des cookies à la place. cookies sur MDN
• Pour plus d'informations sur localStorage, consultez le site suivant cet article sur MDN ou celui-ci sur W3Schools

Answer 2

Veuillez essayer d'utiliser ce code. Il est préférable d'utiliser stockage local .

Ici vous devez vous assurer que vous définissez ce stockage local dans la page html ou le fichier js parent.

créer un stockage local

localStorage.setItem("{itemlable}", {itemvalue}) ;

localStorage.setItem("variable1", $('#r1c1Title').text());
localStorage.setItem("variable2", $('#r1c2Title').text());

Obtenir la valeur du stockage local

localStorage.getItem("{itemlable}")

alert(localStorage.getItem("variable1") + ' Second variable ::: '+ localStorage.getItem("variable2"));

Pour plus d'informations, suivez ce lien https://www.w3schools.com/html/html5_webstorage.asp

Si vous voulez stocker dans un div, suivez ce code.

Code Html

<div class="div_data"></div>

Code Js :

$(document).ready(function () {
            localStorage.setItem("variable1", "Value 1");
            localStorage.setItem("variable2", "Value 2");
                $(".div_data").html(' First variable ::: '+localStorage.getItem("variable1") + ' Second variable ::: '+ localStorage.getItem("variable2"));
        });

J'espère que cela vous aidera.

Answer 3

Vous pouvez utiliser le stockage local comme indiqué dans les commentaires ci-dessus. Veuillez trouver ci-dessous comment écrire en javascript.

Avantages et inconvénients du stockage local

Pour :

1. Le stockage sur le web peut être considéré de manière simpliste comme une amélioration des cookies, offrant une capacité de stockage beaucoup plus importante.
2. 5120KB (5MB ce qui équivaut à 2,5 millions de caractères sur Chrome) est la taille de stockage par défaut pour un domaine entier.
3. Vous disposez ainsi d'un espace de travail beaucoup plus important que celui d'un cookie classique de 4 Ko.
4. Les données ne sont pas renvoyées au serveur pour chaque requête HTTP (HTML, images, JavaScript, CSS, etc.) - ce qui réduit la quantité de trafic entre le client et le serveur.
5. Les données stockées dans localStorage persistent jusqu'à leur suppression explicite. Les modifications apportées sont enregistrées et disponibles pour toutes les visites actuelles et futures du site.

Cons :

Il fonctionne sur la politique de la même origine. Ainsi, les données stockées ne seront disponibles que sur la même origine. // Stockez la valeur dans le stockage local localStorage.setItem("c1Title", $('#r1c1Title').text()) ;

// Retrieve value in local storage
localStorage.getItem("c1Title");

Votre div html

<div id="output"></div>

Ajouter le code Javascript

$('#output').html(localStorage.getItem("c1Title"));

Faites-moi savoir si cela ne fonctionne pas

Answer 4

Créez un fichier common.js et modifiez-le et enregistrez.

Session = (function () {
    var instance;
    function init() {
        var sessionIdKey = "UserLoggedIn";
        return {
            // Public methods and variables.
            set: function (sessionData) {
                window.localStorage.setItem(sessionIdKey, JSON.stringify(sessionData));
                return true;
            },
            get: function () {
                var result = null;
                try {
                    result = JSON.parse(window.localStorage.getItem(sessionIdKey));
                } catch (e) { }
                return result;
            }
        };
    };
    return {
        getInstance: function () {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
}());

function isSessionActive() {
    var session = Session.getInstance().get();
    if (session != null) {
        return true;
    }
    else {
        return false;
    }
}

function clearSession() {
    window.localStorage.clear();
    window.localStorage.removeItem("CampolUserLoggedIn");
    window.location.assign("/Account/Login.aspx");
}

Insérez comme ceci.

$(function () {
    if (!isSessionActive()) {
        var obj = {};
        obj.ID = 1;
        obj.Name = "Neeraj Pathak";
        obj.OrganizationID = 1;
        obj.Email = "npathak56@gmail.com";
        Session.getInstance().set(obj);
    }

    ///clearSession();
});

obtenir comme ça

  LoggedinUserDetails = Session.getInstance().get();