使用Localstorage存储和检索从一个html页面到另一个html页面的javascript变量(DOM)

时间:2017-07-29 07:21:40

标签: javascript php jquery html local-storage

我有一个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的完整演示:

4 个答案:

答案 0 :(得分:5)

您需要使用 localStorage Cookie

使用localStorage

在第一页上,使用以下代码:

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

为域设置variableName的localStorage变量,内容为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 MDNthis one on W3Schools

答案 1 :(得分:1)

请尝试使用此代码。最好使用本地存储

  

您需要确保设置此本地存储空间   父html页面或父js文件中的值。

创建本地存储空间

  

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

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

获取本地存储空间

  

localStorage.getItem(" {itemlable}&#34)

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

希望这有帮助。

答案 2 :(得分:1)

您可以使用上述评论中提到的本地存储空间。请在下面找到如何用javascript编写的内容。

  

本地存储优点和缺点

<强>优点:

  1. 可以简单地将Web存储视为对cookie的改进,提供更大的存储容量。
  2. 5120KB(5MB,相当于Chrome上的250万个字符)是整个域的默认存储大小。
  3. 与典型的4KB cookie相比,这为您提供了更多的工作空间。
  4. 每次HTTP请求(HTML,图像,JavaScript,CSS等)都不会将数据发送回服务器 - 减少了客户端和服务器之间的流量。
  5. 存储在localStorage中的数据会一直存在,直到被明确删除。所做的更改已保存,可用于当前和将来对网站的所有访问。
  6. <强>缺点:

    它适用于同源策略。因此,存储的数据只能在同一个来源上使用。     //将值存储在本地存储中     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"));
    

    如果不起作用,请告诉我

答案 3 :(得分:-1)

创建一个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();