使用Localstorage存儲和檢索從一個html頁面到另一個html頁面的javascript變量（DOM）

Question

我有一個html頁面1.html ，我想得到一些文本內容，並使用jquery將其存儲到js.js文件，以獲取id的文本。

此代碼僅適用於1.html頁面， 其中我要復制的文本 不在 2.html文件中。

這是我的代碼。 請注意，如果我將文本存儲在localstorage setter第二個參數中，它就可以工作。

 $( 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);
    });

這是我在Github上工作的完整演示：

Answer 1

您需要使用localStorage或cookie 。

隨着localStorage

在第一頁上，使用以下代碼：

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

這集的localStorage的變量variableName域，與內容variableContent 。 您可以將這些名稱和值更改為您想要的任何名稱和值，它們僅用作示例

在第二頁上，使用以下代碼獲取值：

localStorage.getItem("variableName")

這將返回存儲在variableName的值，即variableContent 。

筆記

• 您可以在localStorage中存儲的數據量限制為5MB。
• 您可以使用localStorage.removeItem("variableName")刪除項目。
• 根據您所處的位置，您可能需要查看Cookie政策 （這會影響在計算機上存儲數據的所有形式的網站，而不僅僅是Cookie）。 這很重要，否則使用任何這些解決方案可能都是非法的。
• 如果您只想在用戶關閉瀏覽器之前存儲數據，則可以使用sessionStorage（只需在所有代碼實例中將localStorage更改為sessionStorage ）
• 如果您希望能夠在服務器上使用變量值，請使用cookie - 檢查MDN上的cookie
• 有關localStorage的更多信息，請查看有關MDN的這篇文章 ，或W3Schools 上的這篇文章

Answer 2

請嘗試使用此代碼。 最好使用本地存儲 。

在這里，您需要確保在父html頁面或父js文件中設置此本地存儲值。

創建本地存儲

localStorage.setItem（“{itemlable}”，{itemvalue}）;

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

獲取本地存儲價值

localStorage.getItem（ “{itemlable}”）

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

有關更多信息，請訪問此鏈接https://www.w3schools.com/html/html5_webstorage.asp

如果您想存儲在div中，請遵循此代碼。

Html代碼

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

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

希望這可以幫助。

Answer 3

您可以使用上述注釋中提到的本地存儲。 請在下面找到如何用javascript編寫。

本地存儲優點和缺點

優點：

1. 可以簡單地將Web存儲視為對cookie的改進，從而提供更大的存儲容量。
2. 5120KB（5MB，相當於Chrome上的250萬個字符）是整個域的默認存儲大小。
3. 與典型的4KB cookie相比，這為您提供了更多的工作空間。
4. 對於每個HTTP請求（HTML，圖像，JavaScript，CSS等），數據不會發送回服務器 - 減少客戶端和服務器之間的流量。
5. 存儲在localStorage中的數據將一直存在，直到被明確刪除。 所做的更改將保存，並可用於該網站的所有當前和未來訪問。

缺點：

它適用於同源策略。 因此，存儲的數據只能在同一個來源上使用。 //將值存儲在本地存儲localStorage.setItem（“c1Title”，$（'＃r1c1Title'）。text（））;

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

你的html div

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

添加Javascript代碼

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

如果它不起作用，請告訴我

Answer 4

創建一個common.js文件並修改它並保存。

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

像這樣插入。

$(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();
});

得到這樣的方式

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