将当前 CSS 设置存储在本地存储中答案

【问题标题】：Store the current CSS settings in local storage将当前 CSS 设置存储在本地存储中
【发布时间】：2020-11-13 16:34:45
【问题描述】：

我的应用程序中有一个字体更改代码，如下所示 -

HTML -

<button onclick="incdec(1)"></button>
<button onclick="incdec(-1)"></button>
<p id="element1>Element 1 has font size 12px</p>
<p id="element2>Element 2 has font size 14px</p>

JS-

var items = [{
    "el": "#element1",
    "maxSize": 14,
    "minSize": 12
}, {
    "el": "#element2",
    "maxSize": 16,
    "minSize": 14
}]
var incdec = function(dir) {
    items.forEach(function(item) {
        size(dir, item)
    });
};
var size = function(dir, item) {
    var el = document.querySelector(item.el);
    var max = item.maxSize;
    var min = item.minSize;
    console.log(dir, min, max)
    var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
    var fontSize = parseFloat(style);
    if (dir === 1 && fontSize < max) {
        el.style.fontSize = (fontSize + 1) + 'px';
        console.log("incSize", el.tagName, el.style.fontSize)
    } else if (dir === -1 && fontSize > min) {
        el.style.fontSize = (fontSize - 1) + 'px';
        console.log("decSize", el.tagName, el.style.fontSize)
    }

}

我希望所选字体大小在重新加载时保持不变。如何使用本地存储来实现这一点？请注意，两个元素的当前（设置/默认）字体不同，因此必须将不同的值存储在每个元素的本地存储中。我需要逻辑方面的帮助。

谢谢！！！

【问题讨论】：

您遇到了具体问题吗？我在您的代码示例中看到您似乎正在获取字体大小 - 您是否只是想知道如何将它放入并从 localStorage 检索它？ [MDN localStorage docs] 非常简单。
如果您的问题只是“如何将某些东西放入本地存储”，那么已经有几个帖子在处理这个问题，这可能会作为重复而关闭：[1][2]@ 987654323@]

标签： javascript

【解决方案1】：

这是一个您可以在实际中看到的小型工作示例： https://jsfiddle.net/raddevus/nmh3jz7t/20/

这是简单的代码。

    // this next line is just a quick way of showing initialization 
// which should be moved to your onload event so when page loads 
// your localStorage values are read in If they exist)
var fontSize = 12;
initializeValue()

function initializeValue(){
    fontSize = Number(localStorage.getItem("fontSize"));
  if (fontSize <=0 ){
     fontSize = 12;
  }
  
    document.querySelector("#output").value = fontSize;
}

function incdec(value){
    fontSize += value;  // 
  document.querySelector("#output").value = fontSize;
    localStorage.setItem("fontSize",fontSize);
}

这适用于 SoC（关注点分离），因此您只需跟踪 fontSize 并将其保存在 localStorage 中。稍后您可以随时获取该值（localStorage.getItem("fontSize")，并在您的代码中使用该值来更新 UI。

总结

代码第一次将值设置为 12。然后每次用户单击 + 或 - 按钮时，它都会更新值并将其保存到本地存储。

然后，当页面重新加载时，它会从 localStorage 重新加载保存的值（localStorage），以便“记住”旧值。

更新：最终代码

这是包含您的代码的最终代码：

https://jsfiddle.net/raddevus/h0yw4gct/56/

这是一个快速的解决方案。您真的应该仔细查看代码并将其中一些内容分开，这样它就更干净了。

【讨论】：

感谢您的解决方案。但是，您能否在现有代码中应用这个概念？我了解使用本地存储的逻辑，但我无法将它们放在一起。谢谢！！
@ItikaBandta 我更新了代码以反映您的原始代码。请参阅jsfiddle.net/raddevus/h0yw4gct/56 并在测试时标记为解决方案以查看它是否有效。

【解决方案2】：

如果你想使用 localStorage 来存储和检索数据，你可以这样做。

用键存储值

localStorage.setItem('key', 'value');

在您的用例中，您可以像这样存储

localStorage.setItem('font-size', 'value');

按键检索值

localStorage.getItem('key');

从存储中完全删除项目

localStorage.removeItem('key');

这里是doc，你可以参考

【讨论】：