如何将选择和跨度存储到本地存储？

Question

我有一个 select 列表，其中包含三个不同的选项。

当用户 select 是一个城市时，我想根据 selected 选项显示价格跨度。

我也在尝试在 localStorage 中保存 selected 选项，因此如果您刷新页面，selection 会保持 selected 并且正确的价格跨度保持可见。

这是我的：

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 本地存储对象中不存在。您必须按照您设置的方式获取城市。

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

如何将选择和跨度存储到本地存储？

How to store selection and span to local storage?

html

javascript

jquery

local-storage