本地存储，通过 javascript 保存 css 文件名

Question

我正在制作一个页面，用户可以通过下拉菜单更改页面上的几个 looks/style，这会更改 css 文件名。我已设法通过下拉菜单更改样式表，但我现在想将当前 css 文件保存在本地存储中。例如，如果用户更改为 stylesheet3.css（通过下拉菜单），则此 style/look 将在用户下次访问页面时设置。这是我的代码：

HTML:

<link id="myStyleSheet" href="stylesheet1.css" rel="stylesheet" type="text/css"> I put an id in stylesheet

<div id="changeLook">
    Change style:
    <select id="changeStyle" onchange="changeStyleFunction()">
        <option value="stylesheet1.css">Style 1</option>
        <option value="stylesheet2.css">Style 2</option>
        <option value="stylesheet3.css">Style 3</option>
        <option value="stylesheet4.css">Style 4</option>
    </select>
</div>

JavaScript:

function changeStyleFunction() {
    var href;
    var value = document.getElementById("changeStyle").value;

    localStorage.setItem("GetData" , value); //Here is my biggest problem???

    href = value;

    document.getElementById('myStyleSheet').href = href;    
}

如何让当前样式表（值）进入localStore？我是 Local Storages 的新手...谢谢！

Answer 1

试试这个：

<script>
                document.addEventListener("DOMContentLoaded", function()
                {
                        var defaultCSS="defaultCSS.css";
                        var yourHref=localStorage.getItem("GetData");
                        if(typeof yourHref === 'undefined' || yourHref === null)
                        {
                                document.getElementById('myStyleSheet').href=defaultCSS;
                        }
                        else
                        {
                                document.getElementById('myStyleSheet').href=yourHref;
                        }
                });
        </script>

Answer 2

首先你应该确定文档已经加载，然后从本地存储中读取值：

main.js:

(function () {
var DEFAULT_CSS = 'stylesheet.css',
    styleElement,
    styleOption;

document.addEventListener('DOMContentLoaded', function (e) {
    var styleElement = document.getElementById('myStyleSheet'),
    styleOption = document.getElementById("changeStyle"),
    currentCSS = localStorage.getItem('GetData') || DEFAULT_CSS;
    styleElement.href = currentCSS;
    styleOption.value = currentCSS;
    styleOption.addEventListener('change', changeStyleFunction);
});

function changeStyleFunction() {
    var newCSS = styleOption.value;
    localStorage.setItem('GetData', newCSS);
    styleElement.href = newCSS;
}
}());

index.html:

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="changeLook">
    Change style: <select id="changeStyle">
    <option value="stylesheet.css">Default Style</option>
    <option value="stylesheet1.css">Style 1</option>
    <option value="stylesheet2.css">Style 2</option>
    <option value="stylesheet3.css">Style 3</option>
</select>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

stylesheet.css:

#changeLook {
    background-color: #eee;
}

stylesheet1.css:

#changeLook {
    background-color: #ff0000;
}

stylesheet2.css:

#changeLook {
    background-color: #00ff00;
}

stylesheet3.css:

#changeLook {
    background-color: #0000ff;
}

编辑： 我添加了所有文件。

EDIT2: 是的，那是我忘记在文件就绪时分配变量的错误，抱歉，现在应该可以了。

本地存储，通过 javascript 保存 css 文件名

local storage, save css filename through javascript

javascript

css

local-storage