Question

我尝试将选项值保存到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);
    }
}

Answer 1

管理以使其最终发挥作用。这就是我所做的：

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();
    }
}

从localStorage存储和加载下拉列表选项

1 个答案: