以下是一个使用本地存储和下拉菜单的代码示例:
HTML部分:
JavaScript部分:
// 检查本地存储是否可用
function isLocalStorageSupported() {
try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
return true;
} catch (error) {
return false;
}
}
// 保存选项到本地存储
function saveSelection() {
if (isLocalStorageSupported()) {
var dropdown = document.getElementById('dropdown');
var selectedOption = dropdown.value;
localStorage.setItem('selectedOption', selectedOption);
alert('选项已保存!');
} else {
alert('对不起,您的浏览器不支持本地存储。');
}
}
// 加载保存的选项
function loadSelection() {
if (isLocalStorageSupported()) {
var dropdown = document.getElementById('dropdown');
var selectedOption = localStorage.getItem('selectedOption');
if (selectedOption) {
dropdown.value = selectedOption;
}
} else {
alert('对不起,您的浏览器不支持本地存储。');
}
}
// 页面加载时加载选项
window.onload = loadSelection;
在这个示例中,我们首先定义了一个isLocalStorageSupported
函数来检查本地存储是否可用。然后,在saveSelection
函数中,我们获取下拉菜单的选中值,并使用localStorage.setItem
方法将其保存到本地存储中。最后,我们定义了一个loadSelection
函数,在页面加载时从本地存储中加载保存的选项,并将其设置为下拉菜单的选中项。
下一篇:本地存储 .解析 .字符串化