Saving images to local storage

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.

It looks like your saving the image's URL, not the image, what's the question? localStorage values can hold arbitrary strings. — Rafael, Oct 22 '18 at 23:17
The *only* information you need to put into localStorage is "dark" / "light". Everything else can be derived from that. Everything else is supposed to be handled by a function that receives the new parameter. — , Oct 22 '18 at 23:21
Here's a basic demo: https://jsfiddle.net/khrismuc/50a46be3/ (click "Run" to reload the page; current mode is retained) — , Oct 22 '18 at 23:33
As @rafael mentioned above if you are trying to save the images src as it relates to its html element than it would be a string value. Storing that in localStorate should be no different than storing any other string value.Here is a fiddle storing an image elements src value without the path to localStorage https://jsfiddle.net/kw5c9p1a/13/. If you would like the full path remove the .split.pop from line 6. — tilted, Oct 22 '18 at 23:56
If you'd like to save the image itself it looks like this is a good explanation on how to go about that https://stackoverflow.com/questions/19183180/how-to-save-an-image-to-localstorage-and-display-it-on-the-next-page . — tilted, Oct 23 '18 at 00:04

XaelGa · Answer 1 · 2018-10-23T00:38:35.067

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.

edited Oct 23 '18 at 00:38

answered Oct 23 '18 at 00:04

XaelGa

140
2
10

score 0 · Answer 2 · answered Oct 23 '18 at 12:28

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";
            }});

Saving images to local storage

2 Answers2