[英]Using Localstorage to store and retrieve javascript variables from one html page to another (DOM)
I have one html page 1.html
and i want to get some text content and store it to a js.js
file using jquery to get the text by id. 我有一个html页面
1.html
,我想得到一些文本内容,并使用jquery将其存储到js.js
文件,以获取id的文本。
This code only works in 1.html
page, where the text I want to copy from is but not in 2.html
file. 此代码仅适用于
1.html
页面, 其中我要复制的文本 不在 2.html
文件中。
Here is my code. 这是我的代码。 Note that it works if I store text inside localstorage setter second parameter.
请注意,如果我将文本存储在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);
});
Here is the complete demo I am working on Github : 这是我在Github上工作的完整演示:
You need to use either localStorage or cookies . 您需要使用localStorage或cookie 。
On the first page, use the following code: 在第一页上,使用以下代码:
localStorage.setItem("variableName", "variableContent")
That sets a localStorage variable of variableName
for the domain, with the content variableContent
. 这集的localStorage的变量
variableName
域,与内容variableContent
。 You can change these names and values to whatever you want, they are just used as an example 您可以将这些名称和值更改为您想要的任何名称和值,它们仅用作示例
On the second page, get the value using the following code: 在第二页上,使用以下代码获取值:
localStorage.getItem("variableName")
That will return the value stored in variableName
, which is variableContent
. 这将返回存储在
variableName
的值,即variableContent
。
localStorage.removeItem("variableName")
. localStorage.removeItem("variableName")
删除项目。 localStorage
to sessionStorage
in all instances of your code) localStorage
更改为sessionStorage
) Please try to use this code. 请尝试使用此代码。 It's better to use local storage .
最好使用本地存储 。
Here you need to make sure that you are setting this local storage value in parent html page or parent js file.
在这里,您需要确保在父html页面或父js文件中设置此本地存储值。
create local storage 创建本地存储
localStorage.setItem("{itemlable}", {itemvalue});
localStorage.setItem(“{itemlable}”,{itemvalue});
localStorage.setItem("variable1", $('#r1c1Title').text());
localStorage.setItem("variable2", $('#r1c2Title').text());
Get local storage value 获取本地存储价值
localStorage.getItem("{itemlable}")
localStorage.getItem( “{itemlable}”)
alert(localStorage.getItem("variable1") + ' Second variable ::: '+ localStorage.getItem("variable2"));
For more information follow this link https://www.w3schools.com/html/html5_webstorage.asp 有关更多信息,请访问此链接https://www.w3schools.com/html/html5_webstorage.asp
If you wanted to store in div then follow this code. 如果您想存储在div中,请遵循此代码。
Html Code Html代码
<div class="div_data"></div>
Js 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"));
});
Hope this helps. 希望这可以帮助。
You can use local storage as mentioned in above comments. 您可以使用上述注释中提到的本地存储。 Please find below how to write in javascript.
请在下面找到如何用javascript编写。
Local Storage Pros and Cons
本地存储优点和缺点
Pros: 优点:
Cons: 缺点:
It works on same-origin policy. 它适用于同源策略。 So, data stored will only be available on the same origin.
因此,存储的数据只能在同一个来源上使用。 // Store value in local storage localStorage.setItem("c1Title", $('#r1c1Title').text());
//将值存储在本地存储localStorage.setItem(“c1Title”,$('#r1c1Title')。text());
// Retrieve value in local storage
localStorage.getItem("c1Title");
Your html div 你的html div
<div id="output"></div>
Add Javascript Code 添加Javascript代码
$('#output').html(localStorage.getItem("c1Title"));
Let me know if it not works 如果它不起作用,请告诉我
Create a common.js file and modified this and save. 创建一个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");
}
Insert like this. 像这样插入。
$(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();
});
get like this way 得到这样的方式
LoggedinUserDetails = Session.getInstance().get();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.