将图像保存到本地存储

Question

I'm working on a project that has two stylesheets to choose - dark and light.

So, what my code does - it changes stylesheet's href tag and two small icons src (logo and some icon). Then it saves recently used stylesheet to local storage.

function ChangeMode() {
                var image = document.getElementById("mode");
                var logo = document.getElementById("logo");
                if (image.src.match("day_mode")) {
                    image.src = "night_mode_s.png";
                    logo.src = "logo_black.png";
                    document.getElementById("stylesheet").setAttribute('href', 'main_dark.css');

                } else {
                    image.src = "day_mode_s.png";
                    logo.src = "logo.png";
                    document.getElementById("stylesheet").setAttribute('href', 'main.css');
                }  
            }  

                if (localStorage.getItem("ModeChanger")) {
                    document.getElementById("stylesheet").setAttribute("href", localStorage.getItem("ModeChanger"));
                }

                  function MyStylesheet() {
                        var x = document.getElementById("stylesheet").getAttribute("href");
                        document.getElementById("stylesheet").setAttribute("href", x);
                        localStorage.setItem("ModeChanger", x); 

                  }`

What i need to do now is to save image's src to local storage. I tried to change keys and values in function MyStylesheet, but Chrome says that something is wrong.

My question is - are there different rules when it comes to saving images to local storage? What seems to be logical to me is to use this, slightly changed function

var y = document.getElementById("mode").getAttribute("src");
document.getElementById("mode").setAttribute("src", y);
localStorage.setItem("ModeChangerTwo", y); 

And then refer to it in function above.

Send help.

Answer 1

You can only storage Strings in LocalStorage, try this:

localStorage.setItem("ModeChangerTwo", JSON.stringify(y));

Assuming that your variable contains the url property or is the object reference and modeChangerTwo will be its key.

and to obtain the value use:

 y = JSON.parse(localStorage.getItem('ModeChangerTwo'));

to convert it again in a Javascript object.

Answer 2

Thank you all for your help especially you, @Chris G. Your method seemed to be the easiest one, so I used it.

I made another function that didn't use local stogage at all. It looks like this, and it works!

       window.addEventListener("load", function() { 
            var x = document.getElementById("stylesheet").getAttribute("href");
            var y = document.getElementById("mode");
            var z = document.getElementById("logo");
            if (document.getElementById("stylesheet").getAttribute("href") == "main_dark.css") {
                y.src = "night_mode_s.png";
                z.src = "logo_black.png";
   }
            else {
                y.src = "day_mode_s.png";
                z.src = "logo.png";
            }});