LocalStorage - 单独选择

Question

“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 中”

Answer 1

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');
    }
  }
});

LocalStorage - 单独选择

LocalStorage - Seperate Selections

menu

selection

drop