Добрый день!
Необходимо сделать так, чтобы сайт запоминал выбор стиля пользователем.
Вот сайт:
dmitribogachev.pe.hu/itmoexam/default.htm
По умолчанию должен быть светлый дизайн, далее запоминает выбор пользователя. На деле у меня почему-то всегда темный дизайн остается. Что я не так делаю?
Вот код:
<!DOCTYPE html>
<html>
<head>
<title>Krishnanunni Web Guru</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" id = "styleBright">
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="modernizr.js"></script>
<script>
window.addEventListener("load",changeCss,false);
function changeCss() {
var link = document.getElementById("styleBright"),
href = link.getAttribute('href');
localStorage.setItem('default', href);
if(localStorage.getItem('default') == 'css/style.css') {
document.getElementById("styleBright").href="css/main.css";
document.getElementById("switcher").value="Switch the light";
} else if (localStorage.getItem('default') == 'css/main.css') {
document.getElementById("styleBright").href="css/style.css";
document.getElementById("switcher").value="Back to default";
}
}
if (Modernizr.localstorage) {
}
else {
}
</script>
</head>
<body>
<div class="menu" id="Home">
<a href="#go_nav" class="link_nav">Menu</a>
</div>
<div class="navtop">
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#AboutMe">About Me</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
<div class="welcome" id="AboutMe">
<div class="logo"></div>
<h1>Hi there, I am a web/ui/ux designer & developer</h1>
</div>
<div class="picture"></div>
<div class="profile">
<div class = "buttontohell" id = "buttontohell">
<input type = "submit" value = 'Switch the light' onclick = "changeCss();" id = "switcher">
</div>
<div class="avatar"></div>
<h2 id="Contact">Krishnanunni</h2>
<p>Freelance Web designer & developer</p>
</div>
<div class="left">
<h2>Web Design & Development</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised</p>
</div>
<div class="right">
<h2 id="Portfolio">Latest projects</h2>
<div class="yacht"><a href="#"></a>
<p>Project: Yacht rentel</p>
</div>
<div class="mobile"><a href="#"></a>
<p>Project: Mob Apps</p>
</div>
<div class="dental"><a href="#"></a>
<p>Project: Dental Cap</p>
</div>
</div>
<div class="nav">
<ul id="go_nav">
<li><a href="#Home">Home</a></li>
<li><a href="#AboutMe">About Me</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
<div class="icons">
<div class="fb"><a href="https://www.facebook.com"></a></div>
<div class="tw"><a href="https://twitter.com/"></a></div>
<div class="in"><a href="https://www.insocial.com/"></a></div>
</div>
<div class="footer">
<p>Made by <a href="http://dmitribogachev.pe.hu">Dmitri Bogachev</a></p>
</div>
</body>
</html>
Простой
