使用 Localstorage 将 javascript 变量从一个 html 页面存储和检索到另一个 (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

您可以使用上述 cmets 中提到的本地存储。请在下面找到如何用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 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

您需要使用 localStorage 或 cookies。

使用本地存储

在第一页，使用以下代码：

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

这为域设置了一个本地存储变量variableName，内容为variableContent。 您可以将这些名称和值更改为您想要的任何内容，它们只是作为示例使用

在第二页，使用以下代码获取值：

localStorage.getItem("variableName")

这将返回存储在variableName 中的值，即variableContent。

注意事项

• localStorage 中可以存储的数据量有 5MB 的限制。
• 您可以使用localStorage.removeItem("variableName") 删除项目。
• 根据您所在的位置，您可能需要查看cookie policy（这会影响在计算机上存储数据的所有形式的网站，而不仅仅是cookie）。 这很重要，否则使用任何这些解决方案都可能是非法的。
• 如果您只想在用户关闭浏览器之前存储数据，则可以改用 sessionStorage（只需在代码的所有实例中将 localStorage 更改为 sessionStorage）
• 如果您也希望能够在服务器上使用变量值，请改用 cookie - 查看cookies on MDN
• 有关 localStorage 的更多信息，请查看 this article on MDN 或 this one on W3Schools

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