使用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();