Storing the preferred font-size in localStorage

Question

I am making a website with the option to change font-size. Every time when you refresh the page though, the font-size you selected returns to the original font-size. The code below shows the html and JavaScript code for how this function works:

let buttons = document.querySelector('.buttons');
let btn = buttons.querySelectorAll('.btn');
for (var i = 0; i <btn.length; i++){
  btn[i].addEventListener('click', function(){
    let current = document.getElementsByClassName('clicked');
    current[0].className = current[0].className.replace("clicked", "");
    this.className += " clicked";
  })
}

:root {
  --secondary-color: #4978ff;
}

.sec .buttons {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-bottom: 20px;
}

.sec .buttons .btn {
  padding: 0 10px;
  display: inline-flex;
  background: #ddd;
  color: var(--primary-color);
  margin-left: 10px;
  cursor: pointer;
}

.sec .buttons .btn.clicked {
  background: var(--secondary-color);
}

.sec .buttons .btn:nth-child(2) {
  font-size: 1.5em;
}

.sec .buttons .btn:nth-child(3) {
  font-size: 2em;
}

<section class="sec">
      <div class="content">
        <div class="buttons">
          <span class="btn clicked" onclick="document.getElementById('text').style.fontSize = '1em'">A</span>
          <span class="btn" onclick="document.getElementById('text').style.fontSize = '1.25em'">A</span>
          <span class="btn" onclick="document.getElementById('text').style.fontSize = '1.75em'">A</span>
        </div>
        <div class="text" id="text">
          <h3>i'm an h3</h3>
          <p>i'm a paragraph</p>
        </div>
      </div>
    </section>

I was wondering if it was possible to store the chosen font-size in the localStorage so that it stays the same after you refresh the page?

Answer 1

You can do it by creating a function that changes the fontSize and add it on the LocalStorage every time a person clicks on it.

After that you can use the window.onload() to always check, when the page loads, if there is any fontSize on the LocalStorage and set it if there is.

Example:

HTML

<section class="sec">
  <div class="content">
    <div class="buttons">
      <span class="btn clicked" onclick="changeFontSize('1em')">A</span>
      <span class="btn" onclick="changeFontSize('1.25em')">A</span>
      <span class="btn" onclick="changeFontSize('1.75em')">A</span>
    </div>
    <div class="text" id="text">
      <h3>i'm an h3</h3>
      <p>i'm a paragraph</p>
    </div>
  </div>
</section>

JavaScript

const buttons = document.querySelector('.buttons');
const btn = buttons.querySelectorAll('.btn');

window.onload = function() {
  const fontSize = localStorage.getItem('fontSize');
  if (fontSize) {
    document.getElementById('text').style.fontSize = fontSize;
  }
}

function changeFontSize(size) {
  localStorage.setItem('fontSize', size);
  document.getElementById('text').style.fontSize = size;
}

for(let i = 0; i < btn.length; i++){
  btn[i].addEventListener('click', function(){
    let current = document.getElementsByClassName('clicked');
    current[0].className = current[0].className.replace("clicked", "");
    this.className += " clicked";
  })
}

---

Upgraded Version

HTML

<section class="sec">
  <div class="content">
    <div class="buttons" role="group" aria-label="Change font size">
      <button class="btn" id="fnt-1em" onclick="changeFontSize('1em')">A</button>
      <button class="btn" id="fnt-1.25em" onclick="changeFontSize('1.25em')">A</button>
      <button class="btn" id="fnt-1.75em" onclick="changeFontSize('1.75em')">A</button>
    </div>
    <div class="text" id="text">
      <h3>i'm an h3</h3>
      <p>i'm a paragraph</p>
    </div>
  </div>
</section>

JavaScript

const buttons = document.querySelector('.buttons');
const buttonIds = ['fnt-1em', 'fnt-1.25em', 'fnt-1.75em'];

window.onload = function() {
  const fontSize = localStorage.getItem('fontSize');
  if (fontSize) {
    document.getElementById('text').style.fontSize = fontSize;
    addClickedClassToButton(fontSize);
  } else {
    changeFontSize('1em'); // set default size
  }
}

function changeFontSize(size) {
  localStorage.setItem('fontSize', size);
  document.getElementById('text').style.fontSize = size;
  addClickedClassToButton(size);
}

function addClickedClassToButton(size) {
   const current = document.querySelector('.clicked');
   if(current) {
    current.classList.remove('clicked');
   }
   document.getElementById(`fnt-${size}`).classList.add('clicked');
}