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

【问题标题】：local storage, save css filename through javascript本地存储，通过javascript保存css文件名
【发布时间】：2015-07-28 20:41:42
【问题描述】：

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

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 的新手……谢谢！

【问题讨论】：

代码看起来不错..每次重新加载页面时都需要读取localstorage值...
我该怎么做？任何提示？谢谢！

标签： javascript css local-storage

【解决方案1】：

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

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>

样式表.css：

#changeLook {
    background-color: #eee;
}

stylesheet1.css：

#changeLook {
    background-color: #ff0000;
}

stylesheet2.css：

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

stylesheet3.css：

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

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

EDIT2：是的，这是我忘记在准备好的文档上分配变量的错误，抱歉，现在应该没问题了。

【讨论】：

谢谢，但是当我尝试这个时，我得到了这个错误： TypeError: styleOption is null 我试过了： styleOption = document.getElementById("changeStyle").value;然后它说： TypeError: document.getElementById(...) is null
我修好了！我将 styleOption = document.getElementById("changeStyle"); 放入 document.addEventlistener

【解决方案2】：

试试这个：

<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>

【讨论】：

你应该检查'null'