Question

我遇到了一个问题，我在尝试使用localStorage方法在两个单独的样式表（一个蓝色和一个黑色）之间切换时存储用户首选项。

我无法让它发挥作用，我似乎无法调用存储功能，更不用说设置它了。

这是javascript和html代码。

<head>
<title>Welcome Page</title>
<link id= "pagestyle" rel="stylesheet" type="text/css" href="blue.css" title= "blue"/>
  <link id= "pagestyle" rel="stylesheet" type="text/css" href="../blue.css" title= "blue" />


<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

<script type= "text/javascript">
    function swapstylesheet(sheet) {
        document.getElementById('pagestyle').setAttribute('href',sheet);
    }


    function storebackground(swapstylesheet) {
        localStorage.setItem(swapstylesheet);
    }

    function loadbackground(args) {

        document.getElementById("pagestyle").innerHTML = localStorage.swapstylesheet;
        //code
    }
</script>
<div id ="cssbutton">
    <button id= "blueb"  value = "bluev" class ="css1" onclick = "swapstylesheet('blue.css')">Blue</button>
    <button id= "darkb" value = "darkv" class ="css2" onclick = "swapstylesheet('dark.css')">Dark</button>

任何人都可以告诉我我做错了什么？

Answer 1

您没有显示您从loadbackground拨打电话的位置，但您的localStorage代码必须如下所示：

 function storebackground(swapstylesheet) {
    localStorage.setItem('sheetKey', swapstylesheet); //you need to give a key and value
 }

 function loadbackground(args) {
    document.getElementById("pagestyle").innerHTML = localStorage.getItem('sheetKey'); //get value by key
    //or document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}

Answer 2

不要切换样式表。创建1个样式表并为正文提供一个类。通过less或sass可以做得更好。

body.blue { background-color: #006; }
body.dark { background-color: #000; } 
body.blue a { color: #fff; }
body.dark a { color: #600; }

然后将所有特定更改作为子样式进行。将类存储在cookie或存储中，当您加载页面时检查它是否存在并将该类添加到正文中。

使用localStorage以持久性方式切换CSS样式表

2 个答案: