无法在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> 。