Long and hard, I reinvented the bicycle in the form of a color switcher for the site, and I even thought that it worked for me until I reloaded the page. After a reboot, it is expected (but not for me) css flies to default. Google prompted to dig in the direction of localStorage , but nothing happened to me.

 var colorSheets = [ { color: "#f2fcfb", title: "Светлая тема", href: "default.css" }, { color: "#000", title: "Тёмная тема", href: "dark.css" } ]; var ColorSwitcher = (function() { function initColorSwitcher(colorSheets) { var tempCon, colorSwitcher, controlBtn, colorSwitchs, linkHolderHtml, linkHolder; if (Object.prototype.toString.call(colorSheets) !== "[object Array]") { return; } tempCon = document.createDocumentFragment(); colorSwitcher = document.createElement("div"); colorSwitcher.classList.add("ColorSwitcher"); controlBtn = document.createElement("button"); controlBtn.classList.add("ColorSwitcher__control"); colorSwitchs = document.createElement("div"); colorSwitchs.classList.add("ColorSwitcher__switchs"); linkHolderHtml = document.createElement("link"); linkHolderHtml.rel = "stylesheet"; linkHolderHtml.id = "ColorSwitcherLinkHolder"; document.head.appendChild(linkHolderHtml); linkHolder = document.getElementById("ColorSwitcherLinkHolder"); colorSheets.forEach(function(colorSheet, index) { var colorSwitch; if (colorSheet.color && colorSheet.title && colorSheet.href) { colorSwitch = document.createElement("button"); colorSwitch.classList.add("ColorSwitcher__switch") colorSwitch.title = colorSheet.title; colorSwitch.dataset.index = index; colorSwitch.style.backgroundColor = colorSheet.color; colorSwitchs.appendChild(colorSwitch); } }); colorSwitchs.addEventListener("click", function(event) { var index; if (event.target.nodeName !== "BUTTON") { return; } index = event.target.dataset.index; linkHolder.href = colorSheets[index].href; return false; }); controlBtn.addEventListener("click", function(event) { event.target.parentElement.classList.toggle("ColorSwitcher--open"); return false; }); colorSwitcher.appendChild(controlBtn); colorSwitcher.appendChild(colorSwitchs); tempCon.appendChild(colorSwitcher); document.body.appendChild(tempCon); } return { init: initColorSwitcher }; })();

Tried to keep it:

  colorSwitchs.addEventListener("click", function(event) { var index; if (event.target.nodeName !== "BUTTON") { return; } index = event.target.dataset.index; localStorage.setItem("key", index); linkHolder.href = colorSheets[index].href; return false; });

and this

  colorSwitchs.addEventListener("click", function(event) { var index; if (event.target.nodeName !== "BUTTON") { return; } index = event.target.dataset.index; linkHolder.href = colorSheets[index].href; localStorage.setItem("key", linkHolder); return false; });

inside the function and outside of it, but localStorage was empty and stayed. I already gave up. Can I solve the problem with a couple of lines of the correct code, or do I need to start all over again?

Ps I am green

 "use strict"; var colorSheets = [ { color: "#b0eae6", title: "Light", href: "default.css" }, { color: "#f3e686", title: "Gold", href: "gold.css" }, { color: "#000", title: "Dark", href: "dark.css" } ]; var ColorSwitcher = (function() { function initColorSwitcher(colorSheets) { var tempCon, colorSwitcher, controlBtn, colorSwitchs, linkHolderHtml, linkHolder; if (Object.prototype.toString.call(colorSheets) !== "[object Array]") { return; } tempCon = document.createDocumentFragment(); colorSwitcher = document.createElement("div"); colorSwitcher.classList.add("ColorSwitcher"); controlBtn = document.createElement("button"); controlBtn.classList.add("ColorSwitcher__control"); colorSwitchs = document.createElement("div"); colorSwitchs.classList.add("ColorSwitcher__switchs"); linkHolderHtml = document.createElement("link"); linkHolderHtml.rel = "stylesheet"; linkHolderHtml.id = "ColorSwitcherLinkHolder"; document.head.appendChild(linkHolderHtml); linkHolder = document.getElementById("ColorSwitcherLinkHolder"); colorSheets.forEach(function(colorSheet, index) { var colorSwitch; if (colorSheet.color && colorSheet.title && colorSheet.href) { colorSwitch = document.createElement("button"); colorSwitch.classList.add("ColorSwitcher__switch") colorSwitch.title = colorSheet.title; colorSwitch.dataset.index = index; colorSwitch.style.backgroundColor = colorSheet.color; colorSwitchs.appendChild(colorSwitch); } }); colorSwitchs.addEventListener("click", function(event) { var index; if (event.target.nodeName !== "BUTTON") { return; } index = event.target.dataset.index; linkHolder.href = colorSheets[index].href; return false; }); controlBtn.addEventListener("click", function(event) { event.target.parentElement.classList.toggle("ColorSwitcher--open"); return false; }); colorSwitcher.appendChild(controlBtn); colorSwitcher.appendChild(colorSwitchs); tempCon.appendChild(colorSwitcher); document.body.appendChild(tempCon); } return { init: initColorSwitcher }; })(); 
 .ColorSwitcher, .ColorSwitcher * { box-sizing: border-box; } .ColorSwitcher { position: fixed; top: 50%; left: -162px; width: 162px; padding: 20px 10px; background: #fff; border-radius: 0 3px 3px 0; box-shadow: 0 0 15px rgba(0,0,0,.15); -webkit-transform: translateY(-80%); transform: translateY(-80%); -webkit-transition: left .2s; transition: left .2s; } .ColorSwitcher--open { left: 0; } .ColorSwitcher__control, .ColorSwitcher__switch { display: inline-block; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; -webkit-transition: all .2s; transition: all .2s; } .ColorSwitcher__control:focus, .ColorSwitcher__switch:focus { outline: 0; } .ColorSwitcher__control { position: absolute; right: 0; left: 100%; border-radius: 0 3px 3px 0; box-shadow: 5px 0 7px rgba(0,0,0,.15); color: #fff; background: #ff463a; } .ColorSwitcher__control:before { content: ""; display: inline-block; height: 100%; width: 100%; background-size: 70%; background-position: center; background-repeat: no-repeat; } .ColorSwitcher--open .ColorSwitcher__control { background: #fff; } .ColorSwitcher__switchs { margin: -5px; } .ColorSwitcher__switch { border-radius: 3px; margin: 5px; } @-webkit-keyframes controlSpin { 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes controlSpin { 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } 
 <body> </body> <script> ColorSwitcher.init(colorSheets); </script>

  • one
    I do not see the use of localStorage in the attached code - Nikita Umnov
  • one
    I do not see the initColorSwitcher call in the attached code. - Igor
  • Sorry, added pathetic attempts to use localStorage. I saved the saved keys in devTools, it's empty. initColorSwitcher called in html - Sjeurt
  • and where is localStorage.getItem ? - Nikita Umnov
  • So to get the key, you need to keep it. And since my localStorage is empty, nothing is saved. In the console, devtools tried (for the test, check the syntax for correctness, and in general) localStorage.setItems("key","value") The corresponding keys appear in the local storage. - Sjeurt

1 answer 1

So I did not understand why the key in localStorage not saved. Divided into two functions - earned.

Replaced

 colorSwitchs.addEventListener("click", function(event) { var index; if (event.target.nodeName !== "BUTTON") { return; } index = event.target.dataset.index; localStorage.setItem("key", index); linkHolder.href = colorSheets[index].href; return false; });

on

 function swapCss(e) { var index; if (e.target.nodeName !== "BUTTON") { return; } index = e.target.dataset.index; linkHolder.href = colorSheets[index].href; }; function saveIndex(e) { var index; index = e.target.dataset.index; localStorage["index"] = index; }; colorSwitchs.addEventListener("click", saveIndex, false); colorSwitchs.addEventListener("click", swapCss, false);