爲什麼加載一個新的html頁面重置javascript變量？我如何保存這些變量？

所以我有這樣的一段代碼在HTML文件中稱爲demo.html爲什麼加載一個新的html頁面重置javascript變量？我如何保存這些變量？

<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文件，而不必保存變量？

來源

2017-11-11 okmanl

加載新頁面後，一頁上的Javascript已消失。您可以將數據存儲在locaStorage中或將其發佈到服務器端腳本。請注意，只要您開始重定向，其他任何東西都不會執行 – charlietfl

建議：查看[AJAX]（https：//developer.mozilla。org/en-US/docs/AJAX/Getting_Started） –

你可能在會話存儲變量存儲在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); 
};

來源

2017-11-11 01:56:12 Alex

請注意，sessionStorage不是持久的，如果您希望數據在本地掛起，請使用localStorage。 – WillyC

JavaScript是客戶端語言。基本上它在加載頁面時在Web瀏覽器上運行。因此，當一個特定的頁面被卸載（離開頁面，轉到另一個頁面，關閉標籤等）時，頁面中使用的javascript值將被刷新，除非您採取措施保存它們。

爲此，您可以查看localStorage，它將數據保存在瀏覽器中並可以重複使用。您可以使用的另一種方法是設置cookies，它還允許您在頁面加載之間存儲和檢索用戶瀏覽器中的數據。

來源

2017-11-11 02:17:54 Indranil

可以存儲在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那麼你將能夠以檢索存儲在購買所有的值。如果你想存儲一個特定的客戶端的所有響應，或者你可以訪問一個單一的變量，那麼你可以使用任何你喜歡的任何一個例子。如果它小於5MB或類似的東西，你可以使用本地存儲，它比Cookie或會話存儲更好用，因爲它們服務於不同的目的，它們應該分開保存額外的數據，如特定客戶購買信息

來源

2017-11-11 03:02:40

重定向初始化後無法調用'setPicturePriceAndAddress（）;'。更改href將阻止其他代碼 – charlietfl

然後在setPicturePriceAddress（）內部重定向，您可以在點擊時調用setPicturePriceAddress（），然後在函數內部執行重定向。 –

爲什麼加載一個新的html頁面重置javascript變量？我如何保存這些變量？

回答

相關問題