Changing font-size of h1/h2/h3 with button on my website (Using local storage)

Question

I'm creating a website which has options to modify text size on the screen. Seeing that my website's font settings are styled with h1/h2/h3, Its only logical to edit those. Ive found solutions online which change the font size, but translating that to work with local storage (So font settings are saved for the next session!), has been a challenge for me, and hours later I haven't managed to find a solution.

Anyone got a bit of javascript that can help me? Thanks!

Answer 1

Let's suppose these are your html header tags:

<h1>Some text here</h1>
<h2>Some text here</h2>
<h3>Some text here</h3>

And this is the CSS:

h1 {
  font-size: 4em;
}

h2 {
  font-size: 3em;
}

h3 {
  font-size: 2em;
}

Then, if you want to store these CSS settings in the browser's local storage, use this javascript:

var h1font = document.querySelector('h1').style.fontSize;
var h2font = document.querySelector('h2').style.fontSize;
var h3font = document.querySelector('h3').style.fontSize;

localStorage.setItem("h1font", h1font);
localStorage.setItem("h2font", h2font);
localStorage.setItem("h3font", h3font);