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

此外，如果您使用返回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>而不是每个<option>。

无法在sessionStorage中保存数据

2 个答案: