如何将选择和范围存储到本地存储？

Question

我有一个包含三个不同选项的选择列表。

当用户选择一个城市时，我想显示一个基于所选选项的价格范围。

我也在尝试将选定的选项保存在 localStorage 中，因此如果您刷新页面，选项将保持选中状态，并且正确的价格范围保持可见。

这就是我所拥有的：

HTML

<select name="city" id="city">
    <option value="NY">New York</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
</select>


<span id="related_ny_price">New York price</span>

<span id="related_london_price">London price</span>

<span id="related_paris_price">Paris price</span>

JS

    $('[id^="related"]').not(':first').hide();

    $("#city").on('change', function() {

--------------------------------------------        

$("#related_"+this.value+"_price").show().siblings('[id^="related"]').hide();
    });

    $(document).ready(function() {

        var item = window.localStorage.getItem('city');
        $('select[name=city]').val(item);

        $('select[name=city]').change(function() {
           window.localStorage.setItem('city', $(this).val());
        });

    });

Answer 1

DOM 中没有名称为 citya 的元素。其次，您尝试获得 paikkakunta 在 localstorage 对象中不存在。你必须按照你设定的方式来获得这座城市。

html

<select name="city" id="city">
    <option value="NY">New York</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
</select>
<span id="related_ny_price">New York price</span>

<span id="related_london_price">London price</span>

<span id="related_paris_price">Paris price</span>

js

$('[id^="related"]').not(':first').hide();

$("#city").on('change', function() {
  $("#related_" + this.value + "_content").show().siblings('[id^="related"]').hide();
});

$(document).ready(function() {

  //get city
  var item = localStorage.getItem('city');
  $('select[name=city]').val(item);

  //change the selector. There is no element with name citya in DOM
  $('select[name=city]').change(function() {
    //set city
    localStorage.setItem('city', $(this).val());
  });

});

fiddle