無法在sessionStorage中保存數據

Question

我正在關注此答案 ，但無法使其正常工作。

這是我的HTML：

<select id="selection">
    <option></option>
    <option value="ch">China</option>
    <option value="uk">United Kingdom</option>
</select>

<button class="next">Next Page</button>

JS：

window.addEventListener('DOMContentLoaded', function() {
    var contBtn = document.querySelector('.next');

    contBtn.addEventListener('click', function () {

        var options = document.querySelector('#selection');
        var optionsLen = options.length;
        for (var i = 0; i < optionsLen; i++) {
            console.log(options[i].textContent);
            sessionStorage.setItem(options[i].getAttribute('value'), options[i].textContent);
            console.log(options[i].getAttribute('value'));
        }
    });
});

window.addEventListener('DOMContentLoaded', function() {
    for (var i = 0; i < sessionStorage.length; i++) {
        console.log(sessionStorage.getItem(sessionStorage.key(i)));
    }
});

請注意，選項值是通過ajax請求加載的，當用戶導航回到同一頁面時，我需要腳本來保存數據並將其加載到相同的位置。

我該如何實現？ 有其他選擇嗎？

請幫忙。

謝謝。

編輯：我不能單獨獲得'option'標簽，因為在同一頁面上有1個以上的選擇表單。 我需要有針對性的

Answer 1

您正在將options設置為<select> ，而不是<option>列表。 采用：

var options = document.querySelectorAll('#selection option');

另外，如果您使用返回JSON的AJAX請求填充<select> ，則只需將JSON保存在sessionStorage ：

$.ajax( {
    ...
    dataType: 'json',
    success: function(response) {
        sessionStorage.setItem('selection', JSON.stringify(response));
        // update the <select> from response
    }
);

Answer 2

更改

var options = document.querySelector('#selection');

至

var options = document.querySelector('#selection option');

使用$('#selection')您選擇的是<select>而不是<select>每個<option> 。