Question

所以我在一个名为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);


 };

但所有值都会重置。或者是否有另一种方法可以将信息发送到新的html文件而无需保存变量？

Answer 1

您可以将变量存储在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');
}

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

Answer 2

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

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

Answer 3

您可以将变量存储在localstorage中，并从同一域名下的任何位置访问变量，即您可以使用在同一域名下指定的另一个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>

然后，如果在你的文件buy.html文件中，你正在访问

<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>

并且在相同的域名下，例如，如果您的index.html位于http://localhost:5000

并且你的buy.html在http://localhost:5000/buy.html，那么如果你想存储特定客户的所有响应，你就可以以数组的形式检索存储在buy.html中的所有值，或者你可以只是访问一个单一的变量。我已根据您的选择制作了两个您可以使用的示例。如果它小于5mb或类似的东西，你可以使用localstorage，它比使用cookie或会话存储更好，因为它们用于不同的目的，它们应该保持分开以保存额外的数据，如为特定客户购买信息

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

3 个答案: