使用localStorage切換具有持久性的CSS樣式表

我有一個問題，其中我嘗試使用localStorage方法存儲用戶首選項時，兩個單獨的樣式表之間切換，一個藍色和一個黑暗。使用localStorage切換具有持久性的CSS樣式表

我只是不能讓它的功能，我似乎無法調用存儲功能，更不用說設置它。

這裏是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>

誰能告訴我什麼，我做錯了什麼？

來源

2014-10-17 JSS_606

你在調用'storebackground'嗎？你也需要兩個參數：'localStorage.setItem（name，value）'。 – 2014-10-17 04:22:40

你沒有表現出你在哪裏調用從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')); 
}

來源

2014-10-17 04:20:15 artm

不要切換樣式表。創建1個樣式表並給主體一個類。這可以通過更少或更好的方式來完成。

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

然後將所有您的具體更改作爲子樣式。將該類存儲在cookie或存儲中，並在加載頁面時檢查它是否存在並將該類添加到主體中。

來源

2014-10-17 04:22:15 thenetimp

使用localStorage切換具有持久性的CSS樣式表

回答

相關問題