为什么加载新的html页面会重置javascript变量？如何保存这些变量？_Javascript_Jquery_Html

为什么加载新的html页面会重置javascript变量？如何保存这些变量？

javascript jquery html

为什么加载新的html页面会重置javascript变量？如何保存这些变量？,javascript,jquery,html,Javascript,Jquery,Html,我在一个名为demo.html的html文件中有这段代码 <img class="card-img-top" src="src/San_Francisco_Opera_House.jpg" onclick="buyFunction('src/San_Francisco_Opera_House.jpg', 'SF opera house', 'price: $360,000')" alt="Card image cap"> 它运行这个javascript函数，加载一个新的HT

我在一个名为demo.html的html文件中有这段代码

<img class="card-img-top" src="src/San_Francisco_Opera_House.jpg" 
onclick="buyFunction('src/San_Francisco_Opera_House.jpg', 
'SF opera house', 'price: $360,000')" alt="Card image cap">

它运行这个javascript函数，加载一个新的HTML页面。我想在新页面中显示图像

 function buyFunction(housePhotoString, addressString, priceString) {
     $(location).attr('href', 'buy.html');

     houseAttributes.housePhoto = housePhotoString;
     houseAttributes.address = addressString;
     houseAttributes.price = priceString;



     $(document).ready(function() {

         setPicturePriceAndAddress();

     });
 };

 function setPicturePriceAndAddress() {

     let strHTML = "";

     strHTML +=
         +"<img class=\"card-img-top\" src=\"" + houseAttributes.housePhoto + "alt=\"Card image cap\">" +
         "<div class=\"card-block\">" +
         "<h4 class=\"card-title\">" +
         "</i>" + houseAttributes.address + "</h4>" +
         "<p class=\"card-text\">" + houseAttributes.price + "</p>" +
         "</div>";



     $("#housePhotoBuy").html(strHTML);


 };

函数buyFunction（housePhotoString、addressString、priceString）{
$（location.attr（'href'，'buy.html'）；
houseAttributes.housePhoto=housePhotoString；
houseAttributes.address=addressString；
houseAttributes.price=priceString；
$（文档）.ready（函数（）{
setPicturePriceAndAddress（）；
});
};
函数setPicturePriceAndAddress（）{
设strHTML=“”；
strHTML+=
+"" +
"" +
"" +
“”+houseAttributes.address+“”+
““+housedattributes.price+””+
"";
$（“#housePhotoBuy”）.html（strHTML）；
};

但是所有的值都被重置了。或者有没有其他方法可以在不保存变量的情况下将信息发送到新的html文件？

您可以将变量存储在demo.html上的会话存储中，然后在buy.html中调用它们

demo.html:

function buyFunction(housePhotoString, addressString, priceString) {
    sessionStorage.setItem('housePhoto', housePhotoString);
    sessionStorage.setItem('address', addressString);
    sessionStorage.setItem('price', priceString);
    $(location).attr('href', 'buy.html');
}

$(document).ready(function() {
    var housePhotoString = sessionStorage.getItem('housePhoto');
    var addressString = sessionStorage.getItem('address');
    var priceString = sessionStorage.getItem('price');
    setPicturePriceAndAddress(housePhotoString, addressString, priceString);

 });

function setPicturePriceAndAddress(housePhotoString, addressString, priceString) {

    let strHTML = "";

    strHTML +=
     +"<img class=\"card-img-top\" src=\"" + housePhotoString + "alt=\"Card image cap\">" +
     "<div class=\"card-block\">" +
     "<h4 class=\"card-title\">" +
     "</i>" + addressString + "</h4>" +
     "<p class=\"card-text\">" + priceString + "</p>" +
     "</div>";

     $("#housePhotoBuy").html(strHTML);
};

buy.html:

function buyFunction(housePhotoString, addressString, priceString) {
    sessionStorage.setItem('housePhoto', housePhotoString);
    sessionStorage.setItem('address', addressString);
    sessionStorage.setItem('price', priceString);
    $(location).attr('href', 'buy.html');
}

$(document).ready(function() {
    var housePhotoString = sessionStorage.getItem('housePhoto');
    var addressString = sessionStorage.getItem('address');
    var priceString = sessionStorage.getItem('price');
    setPicturePriceAndAddress(housePhotoString, addressString, priceString);

 });

function setPicturePriceAndAddress(housePhotoString, addressString, priceString) {

    let strHTML = "";

    strHTML +=
     +"<img class=\"card-img-top\" src=\"" + housePhotoString + "alt=\"Card image cap\">" +
     "<div class=\"card-block\">" +
     "<h4 class=\"card-title\">" +
     "</i>" + addressString + "</h4>" +
     "<p class=\"card-text\">" + priceString + "</p>" +
     "</div>";

     $("#housePhotoBuy").html(strHTML);
};

$（文档）.ready（函数（）{
var housepotostring=sessionStorage.getItem（'housepotostring'）；
var addressString=sessionStorage.getItem（'address'）；
var priceString=sessionStorage.getItem（'price'）；
setPicturePriceAndAddress（housePhotoString、addressString、priceString）；
});
函数setPicturePriceAndAddress（housePhotoString、addressString、priceString）{
设strHTML=“”；
strHTML+=
+"" +
"" +
"" +
“”+addressString+“”+
““+价格字符串+””+
"";
$（“#housePhotoBuy”）.html（strHTML）；
};

JavaScript是一种客户端语言。基本上，它在加载页面时在web浏览器上运行。因此，当卸载特定页面时（离开页面、转到另一个页面、关闭选项卡等），页面中使用的javascript值将刷新，除非您采取措施保存它们

为此，您可以查看哪些数据保存在浏览器中，哪些数据可以重用。您可以使用的另一种方法是设置，该方法还允许您在页面加载之间从用户浏览器存储和检索数据。

您可以将变量存储在本地存储器中，并从同一域名下的任何位置访问变量，也就是说，您可以使用同一域名下指定的另一个html文件

例如，对于您的示例，我创建了一个小型http服务器，然后用它制作了一个POC

假设您的主脚本包含在某个index.html中，作为您的代码块，如下所示

<html>

<head>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<script type="text/javascript">


 function buyFunction(housePhotoString, addressString, priceString) {
     $(location).attr('href', 'buy.html');

     houseAttributes.housePhoto = housePhotoString;
     houseAttributes.address = addressString;
     houseAttributes.price = priceString;



     $(document).ready(function() {
         //pass the houseAttributes object to setPicturePriceandAddress for better use of functions in js   
         setPicturePriceAndAddress(houseAttributes);

     });
 };

 function setPicturePriceAndAddress(houseAttributes) {

     let strHTML = "";

     strHTML =
         "<img class=\"card-img-top\" src=\"" + houseAttributes.housePhoto + "alt=\"Card image cap\">" +
         "<div class=\"card-block\">" +
         "<h4 class=\"card-title\">" +
         "</i>" + houseAttributes.address + "</h4>" +
         "<p class=\"card-text\">" + houseAttributes.price + "</p>" +
         "</div>";
    console.log('data',strHTML);
    //storing only for one time
    var dataToSave = localStorage.setItem('strHtml',strHTML)

    //storing for multiple time
    var arr = [];

    if(localStorage.getItem('arrOfStr')){
        arr = JSON.parse(localStorage.getItem('arrOfStr'))
    }  
    arr.push(strHTML);
    localStorage.setItem('arrOfStr',JSON.stringify(arr))




     $("#housePhotoBuy").html(strHTML);


 };

 function getSavedValue(){
    var data = localStorage.getItem('strHtml')
    var data2 = JSON.parse(localStorage.getItem('arrOfStr'))
    console.log(data,data2);
 }

 </script>
 </html>


函数buyFunction（housePhotoString、addressString、priceString）{
$（location.attr（'href'，'buy.html'）；
houseAttributes.housePhoto=housePhotoString；
houseAttributes.address=addressString；
houseAttributes.price=priceString；
$（文档）.ready（函数（）{
//将houseAttributes对象传递给setPicturePriceandAddress，以便更好地使用js中的函数
设置PicturePriceAndAddress（房屋属性）；
});
};
函数setPicturePriceAndAddress（房屋属性）{
设strHTML=“”；
strHTML=
"" +
"" +
"" +
“”+houseAttributes.address+“”+
““+housedattributes.price+””+
"";
console.log（'data'，strHTML）；
//只存储一次
var dataToSave=localStorage.setItem（'strHtml'，strHtml）
//多次存储
var-arr=[]；
if（localStorage.getItem（'arrOfStr'））{
arr=JSON.parse（localStorage.getItem（'arrOfStr'））
}  
arr.push（strHTML）；
localStorage.setItem（'arrOfStr'，JSON.stringify（arr））
$（“#housePhotoBuy”）.html（strHTML）；
};
函数getSavedValue（）{
var data=localStorage.getItem（'strHtml'）
var data2=JSON.parse（localStorage.getItem（'arrOfStr'））
console.log（数据，data2）；
}

然后，您将访问文件buy.html中的if

<html>
<head></head>
<body>
<h1>Buy</h1>
<script type="text/javascript">
function getSavedValue(){
    var data = localStorage.getItem('strHtml')
    var data2 = JSON.parse(localStorage.getItem('arrOfStr'))
    console.log(data,data2);
 }
 getSavedValue()

</script>
</body>
</html>


购买
函数getSavedValue（）{
var data=localStorage.getItem（'strHtml'）
var data2=JSON.parse（localStorage.getItem（'arrOfStr'））
console.log（数据，data2）；
}
getSavedValue（）

并且在相同的域名下，例如如果您的index.html位于

如果你想存储特定客户机的所有响应，或者你只需要访问一个变量，那么你就可以以数组的形式检索buy.html中存储的所有值。我已经做了两个例子，你可以根据自己的选择使用任何你喜欢的东西。如果小于5mb或类似的容量，您可以使用localstorage，这比在cookie或会话存储中使用要好，因为它们有不同的用途，并且它们应该分开保存额外的数据，例如，为特定客户端购买信息

加载新页面后，一个页面上的Javascript将消失。您可以将数据存储在locaStorage中，也可以将其发布到服务器端脚本。请注意，一旦启动重定向，将不会执行任何其他操作建议：请注意，如果希望数据挂起，请使用localStorage。无法调用

setPicturePriceAndAddress（）在重定向初始化之后。更改href将阻止其他代码，然后在setPicturePriceAddress（）内重定向，您可以单击调用setPicturePriceAddress（），然后在函数内执行重定向。