从本地存储存储和加载下拉选择

Store and Load dropdown selection from localStorage

本文关键字：存储 选择 加载      更新时间：2023-09-26

我正在尝试将选项值保存到localstorage，以便在打开其他页面或返回网站时保存选项并使用与上次打开网站时相同的css文件。

这是我到目前为止所做的，但我无法让它工作：

.HTML：

<select name="style" id="style" onChange="changeCSS();">
    <option id="standard" value="standard">Standard</option>
    <option id="alternative" value="alternative">Alternative</option>
</select>

Javascript：

function changeCSS() {
    "use strict";
    var select, stylesheet, save;
    select = document.getElementById("style");
    stylesheet = document.getElementById("stylesheet");
    if(localStorage.getItem('save')) {
        select.options[localStorage.getItem('save')].selected = true;
    }
    if (select.value === "standard") {
        stylesheet.href = "include/global.css";
        localStorage.setItem('save', select.value);
    } else if (select.value === "alternative") {
        stylesheet.href = "include/alternative.css";
        localStorage.setItem('save', select.value);
    }
}

最终设法让它工作。这是我所做的：

.HTML：

<select name="style" id="style" onChange="changeCSS();">
    <option id="standard" value="standard">Standard</option>
    <option id="alternative" value="alternative">Alternative</option>
</select>

将此添加到正文标签：

<body onload="autoCSS();">

Javascript：

var select, stylesheet;
function changeCSS() {
    "use strict";
    select = document.getElementById("style");
    stylesheet = document.getElementById("stylesheet");
    if (select.value === "standard") {
        stylesheet.href = "include/global.css";
        localStorage.setItem('save', select.value);
    } else if (select.value === "alternative") {
        stylesheet.href = "include/alternative.css";
        localStorage.setItem('save', select.value);
    }
}
function autoCSS() {
    "use strict";
    select = document.getElementById("style");
    stylesheet = document.getElementById("stylesheet");
    if (localStorage.getItem('save')) {
        select.options[localStorage.getItem('save')].selected = true;
        changeCSS();
    }
}
相关文章：