Как сохранять стили в localStorage ? И применять после перезагрузки страницы?

Как сделать так чтобы после перезагрузки слова у которых none или table-cell , оставались.
Они меняются по нажатию на кнопку

const inputEng = document.querySelector('.eng-word'),
  inputRus = document.querySelector('.rus-word'),
  btnAddWord = document.querySelector('.addWords'),
  btnHideRusWords = document.querySelector('.showEngWords'),
  btnHideEngWords = document.querySelector('.showRusWords');
forms = document.querySelectorAll('.forms-val');
let words,
  containerWords = document.querySelector('.word-container');

localStorage.length < 1 ? (words = []) : (words = JSON.parse(localStorage.getItem('words')));

// Попытки что-то придумать
// if (localStorage.getItem('engWords') !== null) {
//   document.querySelectorAll('.english-word').forEach((item) => {
//     item.style.display = localStorage.getItem(JSON.parse('engWords'));
//   });
// }

// if (localStorage.getItem('rusWords') !== null) {
//   document.querySelectorAll('.russian-word').forEach((item) => {
//     item.style.display = localStorage.getItem(JSON.parse('rusWords'));
//   });
// }

btnHideEngWords.addEventListener('click', () => {
  if (words.length > 0) {
    let layoutEngWords = document.querySelectorAll('.russian-word').forEach((item) => {
      item.style.display === 'none'
        ? (item.style.display = 'table-cell')
        : (item.style.display = 'none');
      //   localStorage.setItem('rusWords', JSON.stringify(item.style.display));
    });
  }
});

btnHideRusWords.addEventListener('click', () => {
  if (words.length > 0) {
    let layoutRusWords = document.querySelectorAll('.english-word').forEach((item) => {
      item.style.display === 'none'
        ? (item.style.display = 'table-cell')
        : (item.style.display = 'none');

      //   localStorage.setItem('engWords', JSON.stringify(item.style.display));
    });
  }
});

containerWords.querySelectorAll('.english-word').forEach((item) => {
  item.style.display = 'none';
});

const viewWords = (item) => {
  containerWords.innerHTML += `
    <tr>
        <td class="english-word">${words[item].english}</td>
        <td class="russian-word">${words[item].russian}</td>
        <td><button class="btn-setting delete-word">Delete</button></td>
    </tr>
    `;
};

words.forEach((element, index) => {
  viewWords(index);
});

const deleteWord = (element) => {
  const elementLine = element.target.parentNode.parentNode.rowIndex;
  element.target.parentNode.parentNode.parentNode.remove();
  words.splice(elementLine, 1);
  localStorage.removeItem('words');
  localStorage.setItem('words', JSON.stringify(words));
};

const listenDeleter = () => {
  if (words.length > 0) {
    let btnDelete = document.querySelectorAll('.delete-word').forEach((item) => {
      item.addEventListener('click', (element) => {
        deleteWord(element);
      });
    });
  }
};

listenDeleter();

btnAddWord.addEventListener('click', () => {
  if (
    inputEng.value.length < 1 ||
    inputRus.value.length < 1 ||
    !isNaN(inputEng.value) ||
    !isNaN(inputRus.value)
  ) {
    for (let i of forms) {
      i.classList.add('error');
    }
  } else {
    for (let i of forms) {
      i.classList.remove('error');
    }
  }
  words.push(new PusherWords(inputEng.value, inputRus.value));
  localStorage.setItem('words', JSON.stringify(words));
  viewWords(words.length - 1);
  inputEng.value = null;
  inputRus.value = null;
});

function PusherWords(english, russian) {
  this.english = english;
  this.russian = russian;
}