2014-10-17 2 views
0

У меня возникла проблема, когда я пытаюсь использовать метод 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> 

Любой человек может сказать мне, что я делаю неправильно?

+0

Вы называете 'storebackground'? Также вам нужны два параметра: 'localStorage.setItem (name, value)'. –

ответ

2

Вы не показать, где вы звоните 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')); 
} 
1

Не переключают таблицы стилей. Создайте 1 таблицу стилей и дайте телу класс. Это было бы лучше с меньшими затратами.

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

Затем внесите все ваши конкретные изменения в качестве подтипов. Храните класс в файле cookie или хранилище, и когда вы загружаете страницу, проверьте, существует ли она и добавьте класс в тело.

Смежные вопросы