Why does localstorage save only one option?

D

Dmitry2015-10-25 17:44:10

css

Dmitry, 2015-10-25 17:44:10

Good afternoon!
It is necessary to make the site remember the choice of style by the user.
Here is the site: dmitribogachev.pe.hu/itmoexam/default.htm
The default should be a light design, then it remembers the user's choice. In fact, for some reason, I always have a dark design. What am I doing wrong?
Here is the code:

<!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 &amp; 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 &amp; developer</p>
  </div>
  <div class="left">
    <h2>Web Design &amp; 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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Andrey Khokhlov, 2015-10-25
@Lostmain

At each launch, the same href is written to localStorage, why would it change