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

local storage, save css filename through javascript

本文关键字：保存 CSS 文件名 javascript 通过 存储      更新时间：2023-09-26

我正在制作一个页面，用户可以通过下拉菜单更改页面上的几个外观/样式，从而更改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?我是本地仓库新来的…谢谢!

首先，您应该确保文档已加载，然后从localstorage读取值:

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:是的，这是一个错误，我忘记在文档准备上分配变量，对不起，现在应该可以了

试试这个:

<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>
相关文章：