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



>我有一个 html 页面1.html,我想获取一些文本内容并将其存储到js.js文件中,使用 jquery 通过 id 获取文本。

此代码仅适用于1.html页面,我要从中复制的文本2.html但不在文件中。

这是我的代码。请注意,如果我将文本存储在本地存储库第二个参数中,它可以工作。

$( 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上工作的完整演示:

您需要使用localStoragecookie

使用本地存储

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

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

这会为域设置 localStorage 变量variableName,内容variableContent您可以将这些名称和值更改为您想要的任何内容,它们仅用作示例

在第二页上,使用以下代码获取值:

localStorage.getItem("variableName")

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

笔记

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

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

在这里,您需要确保设置此本地存储 父 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 中,请按照此代码进行操作。

网页代码

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

希望这有帮助。

您可以使用上述注释中提到的本地存储。请在下面找到如何用javascript编写。

本地存储的优缺点

优点:

  1. 网络存储可以简单地视为对 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");

你的 htmldiv

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

添加脚本代码

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

如果它不起作用,请告诉我

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

最新更新