如何在窗口位置之后存储数据

How to store data after window.location?

本文关键字：之后 存储 数据 位置 窗口      更新时间：2023-09-26

下面我有一个车辆下拉列表，它将从文本文件中提取新选项。我还没有找到在页面更改为正确的类别页面后保存这些选定的 TEXT 值的方法。因此，最终我将下拉列表更改为一个div，该div会将所选下拉列表显示为文本。

那我怎么做..

A.在页面重新加载后保留下拉值和文本值。

B.保留所选文本和适当的div显示

任何帮助将不胜感激！

.HTML：

<div id="shop_vehicle_container">
    <div id="shop_vehicle">
        <div id="bl_firstRow">                    
                   <div id="vehic_sel">
                   <div class="sel_label">
                    <div class="sel_label">
                        Shop By Vehicle:
                    </div>
                 </div>
                 <div class="sel_container">
                     <select id="vehic_sel_model">
                        <option value="">Choose Model</option>
                        <option value="17Prelude">Prelude</option>
                        <option value="21Civic">Civic</option>
                        <option value="22CRX">CRX</option>
                        <option value="23CivicdelSol">Civic del Sol</option>
                        <option value="18Accord">Accord</option>
                        <option value="20Odyssey">Odyssey</option>
                        <option value="24Element">Element</option>
                        <option value="26Pilot">Pilot</option>
                        <option value="16Passport">Passport</option>
                        <option value="15CR-V">CR-V</option>
                        <option value="19S2000">S2000</option>
                        <option value="25Insight">Insight</option>
                        <option value="29Accord Crosstour">Accord Crosstour</option>
                        <option value="31Crosstour">Crosstour</option>
                        <option value="30CR-Z">CR-Z</option>
                        <option value="27Ridgeline">Ridgeline</option>
                        <option value="28Fit">Fit</option>
                    </select>
                    <select disabled ="" id="vehic_sel_year">
                    <option value="">Choose Year</option>
                    </select>   
                    <select disabled= "" id="vehic_sel_trim" onchange="VehicPaste()">
                        <option value="">Choose Trim Level</option>
                    </select>
<script src="/v/js.js"></script>    
<script src="/v/Fade to New DIv.js"></script>
<script src="/v/OpenSecondRow.js"></script>
<script>
function VehicPaste() {
    var Vehicle =document.getElementById('vehic_sel_model').options[document.getElementById('vehic_sel_model').selectedIndex].text + " "+document.getElementById('vehic_sel_year').options[document.getElementById('vehic_sel_year').selectedIndex].text+ " "+ document.getElementById('vehic_sel_trim').options[document.getElementById('vehic_sel_trim').selectedIndex].text;
    document.getElementById("VehicleMessage").innerHTML = "Honda " + Vehicle;
}
</script>
</div>
</div>
</div>
<div id="vehic_submit" style= "display: none">
<div id="VehicleMessage"></div>
<input id = "changeVehic" type="image" src="/v/changevehicle_btn.gif.png">
<script>
$(document).ready(function() {
    $("#changeVehic").click(function(){
       $('#vehic_submit').fadeOut(0, function() {
            $('#bl_firstRow').html($('#bl_firstRow').html());
            $('#bl_firstRow').fadeIn(0);
        });
    })
});
</script>
                        </div>
            <div class="clearfloat">
            </div>
<br>
        <div id="bl_secondRow" style="display:none">
            <div id="vehic_sel2">
                <div class="sel_label">
                    <div class="sel_label">
                        Shop By Category:
                    </div>
                </div>
                                <div class="sel_container">
                    <select id="vehic_sel_section">
                        <option value="">Choose Engine</option>
                    </select>
<script>
    $(function goto(){
      $('#vehic_sel_section').on('change', function () {
          var url = "/SearchResults.asp?Cat="+document.getElementById('vehic_sel_section').value
          if (url) { 
              window.location = url; 
}
      });
    });
</script>
</div>
change您可以

localStorage <select>事件 

localStorage.setItem('select_vehic_sel_model', JSON.stringify($(this).val()));

准备好DOM，您可以将其恢复为

var retrievedObject = localStorage.getItem('select_vehic_sel_model');
if(retrievedObject!=undefined && retrievedObject!=null){
   $("#vehic_sel_model").val(retrievedObject);
}

如果你有更多的项目，你可以制作json对象，比如

var json = {
"select_vehic_sel_model":"<value>",
"textbox":"<value>",
"div_status":"hide",
}
有几个

选项可供您使用，正如评论中已经指出的那样。

  1. 使用 localStorage 在可本地访问的页面加载中保存所需的数据位（因此得名 :p）。 你可以在MDN上阅读更多关于它的信息： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

  2. 在网址中使用查询参数，因此标记?item1=val1&item2=val2或其某些变体。

  3. 使用哈希标记来附加数据，类似于数字 2，但它实际上并没有发送到服务器。 示例：#item1=asdasd,item2=valasd2 .

您还可以字符串化对象并将 JSON 存储在 URL 中等。

相关文章：