Javascript 将图像保存到本地存储

我正在做一个有两个样式表可供选择的项目——黑暗和光明

所以，我的代码所做的是——它改变了样式表的href标记和两个小图标src（logo和一些图标）。然后将最近使用的样式表保存到本地存储

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

                  }`

我现在需要做的是将映像的src保存到本地存储。我试图更改函数MyStylesheet中的键和值，但Chrome表示出了问题

我的问题是-在将图像保存到本地存储时，是否有不同的规则？对我来说合乎逻辑的是使用这个稍微改变的函数

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

然后在上面的函数中引用它

---

发送帮助。

您只能在LocalStorage中存储字符串，请尝试以下操作：

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

假设您的变量包含url属性或是对象引用，modeChangerTwo将是其键

为了获得价值，请使用：

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

---

在Javascript对象中再次转换它

谢谢大家的帮助，尤其是你，@Chris G。你的方法似乎是最简单的，所以我用了它

我做了另一个函数，它根本不使用本地stogge。它看起来像这样，而且很有效

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

---

看起来您保存的是图像的URL，而不是图像，问题是什么？localStorage值可以保存任意字符串。需要放入localStorage的唯一信息是“暗”/“亮”。其他一切都可以从中衍生出来。其他一切都应该由接收新参数的函数来处理。下面是一个基本的演示：（单击“运行”重新加载页面；保留当前模式）如上面提到的@rafael，如果您试图保存图像src，因为它与html元素相关，而不是字符串值。将其存储在localStorate中应该与存储任何其他字符串值没有区别。如果希望完整路径从第6行删除.split.pop。如果希望保存图像本身，这似乎是一个很好的解释。