这是选择1个选项的第一个html页中的下拉列表。
<body>
<label for="select">Gender:</label>
<select name="select" id="select">
<option value = "0">Select</option>
<option value = "1">Male</option>
<option value = "2">Female</option>
<option value = "3">Other</option>
</select>
</body>
这是我用来将选定选项存储在本地存储中的脚本。
<script>
var options = [];
$("#select option").filter(":selected").each(function(index) {
var option = $(this).text();
options.push(option);
$("#select").text(options.toString())
});
localStorage.setItem('select', options);
</script>
这是我要显示所选选项的另一个页面。
<body>
<p> Gender: <span id="display_select"></span></p>
</body>
这是从本地存储中获取所选选项并将其显示在第二页上的脚本。它显示为null。
$(document).ready(function() {
for (let i = 0; i < localStorage.length; i++) {
var options = localStorage.getItem("select");
$("#display_select").text(options);
}
});
存储选择值的脚本实际上并不能执行您认为的操作。您需要做的是让一个事件处理程序在选择值更改并将值存储在localStorage中时运行。页面首次加载时，您只运行一次。
$("#select").on("change", function() {
localStorage.setItem('select', this.textContent);
});
然后稍后获得值...
$(document).ready(function() {
$("#display_select").text(localStorage.getItem("select"));
});
问题在您存储值的第一个脚本文件中， var options = [];
$(document).ready(function(){
$('#select').change(function(){
//console.log($(this).val());
localStorage.setItem('select', $(this).val());
});
});
localstorage仅支持字符串。为此，您必须使用json.stringify((和json.parse((。
localStorage.setItem('select', JSON.stringify(options));
//...
var storedSelect = JSON.parse(localStorage.getItem('select'));
您的景象选择选项：
$('#select').change(function() {
localStorage.setItem('select', $('#select option:selected').text());
});
var select = localStorage.getItem('select');
$("#display_select").html(select);