CODEWITHSUNDEEP
javascripthtmllocal-storage
J maria
J maria

Reputation: 373

How to save custom style rule to LocalStorage?

Button works, but after refreshing the page, the rule is gone.

My code:

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

};

Upvotes: 2

Views: 512

Answers (2)

sonali
sonali

Reputation: 758

Shouldn't that be the normal behavior, refreshing the page should reset it to the initial state?

If you want to use LocalStorage for saving the style rules, you can

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

// on page load
window.onload = function(){
  if (localStorage.getItem("addNavbarRule")){
      sheet.insertRule(".navbar {letter-spacing: 3px !important;}", 0);
   }
}

Upvotes: 1

Landon Soo Hoo
Landon Soo Hoo

Reputation: 68

You can do it like this:

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

So for what you want it could be like this:

localStorage.setItem("size", "15px");
Then you have to get it when the window loads:

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

Also, give your navbar or element and ID of "navbar". Also, there is no need to create a style tag. You can do that with style in javascript.

Upvotes: 1

Related Questions