无法在会话中保存数据存储

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

变化

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

到

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

随着$('#selection')您选择的<select>内未选择每个<option>。

Answer 2

您正在将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 
    } 
);