javascript - 无法在 sessionStorage 中保存数据

Question

我正在关注this answer并且无法让它工作。

这是我的 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 请求加载的，当用户导航回同一页面时，我需要脚本来保存数据并将其加载到相同的位置。

我怎样才能实现这个目标？有其他选择吗？

请帮忙。

谢谢。

编辑:我无法单独获取“选项”标签，因为同一页面上有多个选择表单。我需要有针对性的

Answer 1

您正在设置options到<select> ，不是 <option> 的列表。使用:

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

此外，如果您要填充 <select>使用返回 JSON 的 AJAX 请求，您可以简单地将 JSON 保存在 sessionStorage 中:

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