为什么 localstorage 存储错误的值？答案

【问题标题】：Why does localstorage store the wrong value?为什么 localstorage 存储错误的值？
【发布时间】：2020-05-04 00:13:20
【问题描述】：

我是一个有本地存储问题的新手。我有一些从服务器通过 ajax 加载的相关下拉列表。当用户做出选择时，localstorage 会存储错误的值……最后一个值。根据我的研究，我认为 .map() 可能是我的问题的解决方案，但作为一个新手，我不熟悉语法，我无法让它工作。谁能弄清楚是什么导致了这个问题？ .map() 是正确的解决方案吗？这是我遇到问题的照片。

这里是代码

    $('.country').on('change', function () {
        var countryId = $(this).val();            
        var state_select = $(this).closest('form').find('.state');
        var city_select = $(this).closest('form').find('.city');            

        if (countryId) {
            $.ajax({
                type: 'POST',
                dataType: 'JSON', 
                url: 'ajaxData3.php',
                data: {
                    country_id: countryId
                },                     
                success: function (r) {
                    console.log('States', r);

                    $(state_select).html('<option value="" selected="selected">State</option>');
                    $(city_select).html('<option value="" selected="selected">City </option>');

                    if (r.status) {
                        r.data.forEach(function (state) {
                            $(state_select).append(`<option value="${state.id}">${state.name}</option>`);

                            $('.state').each(function(r) {
                                var stateList = $(state);
                                var thisSelection = $(this);
                                var thisId = thisSelection.attr('id');
                                var storageId = 'state-' + thisId;
                                var storedInfo = JSON.parse(localStorage.getItem(storageId));                                


                                thisSelection.change(function(i) {                                   
                                    var selectedOptions = []; // create an array to hold all currently selected options 

                                    thisSelection.find('option:selected').each(function(i) {
                                        var thisOption = $(this);
                                        selectedOptions.push(thisOption.val());                                           
                                    });

                                    localStorage.setItem(storageId, JSON.stringify(state.name));                                       

                                })                                  

                            })

                        })

                    } else {

                        $(state_select).html('<option value="" selected="selected">Unavailable </option>');
                        $(city_select).html('<option value="" selected="selected">Unavailable </option>');
                    }

                }
            })
        };

这是标记

         <form id="form1" autocomplete="off">
    <select id="country1" class="country" name="country">
        <?php include("countryAjaxData.php"); ?> 
    </select> 
    <select id="state1" class="state" name="state">
        <option value="" selected="selected">Select state</option>
    </select> 
    <select id="city1" class="city" name="city">
        <option value="" selected="selected">Select city</option> 
    </select>
</form>
<form id="form2" autocomplete="off">
    <select id="country2" class="country" name="country">
        <?php include("countryAjaxData.php"); ?> 
    </select> 
    <select id="state2" class="state" name="state">
        <option value="" selected="selected">Select state</option>
    </select> 
    <select id="city2" class="city" name="city">
        <option value="" selected="selected">Select city</option> 
    </select>
</form>
<form id="form3" autocomplete="off">
    <select id="country3" class="country" name="country">
        <?php include("countryAjaxData.php"); ?> 
    </select> 
    <select id="state3" class="state" name="state">
        <option value="" selected="selected">Select state</option>
    </select> 
    <select id="city3" class="city" name="city">
        <option value="" selected="selected">Select city</option> 
    </select>
</form>

【问题讨论】：

不完全相关，但是window.load = $(document).ready(...);的目的是什么？ .ready 返回一个 HTMLDocument 对象，load 只是 window 的自定义属性。
我最终需要将我的 getItem 放入代码中。出于某种原因，localstorage 不会将这些值加载到下拉列表中……根据我的研究和我的尝试。我已将其删除，因为它分散了我原来的问题的注意力。
对窗口的额外循环引用似乎没什么用，$(document).ready(...); 就可以了。
我怀疑这些值来自服务器。你确定它们是正确的吗？尝试在设置 localstorage 的行上放置一个断点并检查 state.name 的值
@Chimera 用户在下拉列表中选择的值是正确的（请参见照片）。即使您可以清楚地看到下拉列表具有用户选择的实际值，本地存储也会自动存储状态列表中的最后一个值。如果状态下拉列表中只有一个状态，那么默认情况下它也是最后一个状态以及选定状态....如果这有意义的话。

标签： javascript jquery local-storage storage

【解决方案1】：

我决定发布答案，以便其他人可以看到。希望stackoverflow上的某个人下次会花时间帮助我。这种“投票”、“积分”和“徽章”会妨碍实际学习。

forEach() 每次调用时都会重复该函数。所以最后一个条目将是重复完成的地方。 localStorage.setItem 需要移动到 .change() 函数或 .on('change', function()) 中，并且值需要是 .text() 才能简单地读取显示的文本。

    localStorage.setItem('yourkeyhere', JSON.stringify($(this).text()));

【讨论】：