javascript - 如何将自定义样式规则保存到 LocalStorage？

Question

按钮有效，但刷新页面后，规则消失了。
我的代码:

  // Create the <style> tag
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

// Button
let spaces = document.getElementById("spaces"); 
spaces.onclick = () => {
  sheet.insertRule(".navbar {letter-spacing: 3px !important;}", 0);

};

Answer 1

你可以这样做:

localStorage.setItem("your item name or id goes here", "value goes here");

所以对于你想要的，它可能是这样的:

localStorage.setItem("size", "15px");

然后你必须在窗口加载时获取它:

window.onload = function(){
var nav = document.getElementById(navbar);
var finalSize = localStorage.getItem('size');
nav.style.letterSpacing = finalSize;
}

另外，提供您的导航栏或元素以及“导航栏”的 ID。
此外，无需创建样式标签。你可以用 style 做到这一点
在 JavaScript 中。