LocalStorage-单独选择

如何解决LocalStorage-单独选择

“是否有针对js localstorage的优化建议？”

$(function () {
    $('#selection1').change(function () {
        localStorage.setItem('todoData',this.value);
    });
    if (localStorage.getItem('todoData')) {

        $('#selection1').val(localStorage.getItem('todoData')).trigger('change');
    }
});


$(function () {
    $('#selection2').change(function () {
        localStorage.setItem('todoData2',this.value);
    });
    if (localStorage.getItem('todoData2')) {

        $('#selection2').val(localStorage.getItem('todoData2')).trigger('change');
    }
});

$(function () {
    $('#selection3').change(function () {
        localStorage.setItem('todoData3',this.value);
    });
    if (localStorage.getItem('todoData3')) {

        $('#selection3').val(localStorage.getItem('todoData3')).trigger('change');
    }
});

$(function () {
    $('#selection4').change(function () {
        localStorage.setItem('todoData4',this.value);
    });
    if (localStorage.getItem('todoData4')) {

        $('#selection4').val(localStorage.getItem('todoData4')).trigger('change');
    }
});

$(function () {
    $('#selection5').change(function () {
        localStorage.setItem('todoData5',this.value);
    });
    if (localStorage.getItem('todoData5')) {

        $('#selection5').val(localStorage.getItem('todoData5')).trigger('change');
    }
});

$(function () {
    $('#selection6').change(function () {
        localStorage.setItem('todoData6',this.value);
    });
    if (localStorage.getItem('todoData6')) {

        $('#selection6').val(localStorage.getItem('todoData6')).trigger('change');
    }
});

$(function () {
    $('#selection7').change(function () {
        localStorage.setItem('todoData7',this.value);
    });
    if (localStorage.getItem('todoData7')) {

        $('#selection7').val(localStorage.getItem('todoData7')).trigger('change');
    }
});

$(function () {
    $('#selection8').change(function () {
        localStorage.setItem('todoData8',this.value);
    });
    if (localStorage.getItem('todoData8')) {

        $('#selection8').val(localStorage.getItem('todoData8')).trigger('change');
    }
});

$(function () {
    $('#selection9').change(function () {
        localStorage.setItem('todoData9',this.value);
    });
    if (localStorage.getItem('todoData9')) {

        $('#selection9').val(localStorage.getItem('todoData9')).trigger('change');
    }
});

$(function () {
    $('#selection10').change(function () {
        localStorage.setItem('todoData10',this.value);
    });
    if (localStorage.getItem('todoData10')) {

        $('#selection10').val(localStorage.getItem('todoData10')).trigger('change');
    }
});

$(function () {
    $('#selection11').change(function () {
        localStorage.setItem('todoData11',this.value);
    });
    if (localStorage.getItem('todoData11')) {

        $('#selection11').val(localStorage.getItem('todoData11')).trigger('change');
    }
});

$(function () {
    $('#selection12').change(function () {
        localStorage.setItem('todoData12',this.value);
    });
    if (localStorage.getItem('todoData12')) {

        $('#selection12').val(localStorage.getItem('todoData12')).trigger('change');
    }
});

$(function () {
    $('#selection13').change(function () {
        localStorage.setItem('todoData13',this.value);
    });
    if (localStorage.getItem('todoData13')) {

        $('#selection13').val(localStorage.getItem('todoData13')).trigger('change');
    }
});

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="pieteicejs.js"></script>
</head>
<select id="selection1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select><br></br>

<select id="selection2">
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select><br></br>

<select id="selection3">
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select><br></br>

<select id="selection4">
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select><br></br>

<select id="selection5">
    <option>13</option>
    <option>14</option>
    <option>15</option>
</select><br></br>

<select id="selection6">
    <option>16</option>
    <option>17</option>
    <option>18</option>
</select><br></br>

<select id="selection7">
    <option>19</option>
    <option>20</option>
    <option>21</option>
</select><br></br>

<select id="selection8">
    <option>22</option>
    <option>23</option>
    <option>24</option>
</select><br></br>


<select id="selection9">
    <option>25</option>
    <option>26</option>
    <option>27</option>
</select><br></br>

<select id="selection10">
    <option>28</option>
    <option>29</option>
    <option>30</option>
</select><br></br>

<select id="selection11">
    <option>31</option>
    <option>32</option>
    <option>33</option>
</select><br></br>

<select id="selection12">
    <option>34</option>
    <option>35</option>
    <option>36</option>
</select><br></br>

<select id="selection13">
    <option>37</option>
    <option>38</option>
    <option>39</option>
</select><br></br>

“如何按顺序将下拉菜单彼此分开，以便它们都保存在本地存储中”

解决方法

LocalStorage基本上是键-值存储，有关更多信息，请阅读MDN

// Assuming you have a clear localStorage...
localStorage.getItem('score')     // -> null

// The first setItem will create a new entry 
localStorage.setItem('score',5)
localStorage.getItem('score')     // -> 5

// Any next setItem on the same key will overwrite the data
localStorage.setItem('score',10)
localStorage.getItem('score')     // -> 10

因此，如果您要分别保存两个下拉菜单，则必须使用其他名称，例如

// SELECT 1
localStorage.setItem('todoData1',this.value);
localStorage.getItem('todoData1');
// SELECT 2
localStorage.setItem('todoData2',this.value);
localStorage.getItem('todoData2');

修改：（问题更改后）

要在选择列表中实现此目的，您可能希望使用循环来声明：

$(function() {
  for (let i = 0; i < 13; i++) {
    const storageName = `todoData${i}`;
    const selectionId = `#selection${i}`;
    $(selectionId).change(function() {
        localStorage.setItem(storageName,this.value);
    });
    // to save data initially
    if (!localStorage.getItem(storageName)) {
        $(selectionId).trigger('change');
    }
  }
});