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

Question

[Winrous]

Есть две функции повещенные на кнопки , одна прячет слова на русском ,другая на английском,
то есть меняет с display:table-cell на display: none, сделал то чтобы эти значения сохранялись в localStorage, но когда обновляю страницу, в localStorage, остаётся значение, но сами стили не сохраняются на странице.

btnHideRusWords.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('hideRusWord', JSON.stringify(item.style.display))
            if (localStorage.getItem('hideRusWord') === 'none' ) {
                item.style.display = localStorage.getItem(JSON.parse('hideRusWord'))
            } else if(localStorage.getItem('hideRusWord') === 'table-cell') {
                item.style.display = localStorage.getItem(JSON.parse('hideRusWord'))
            }
        })
    }
})

btnHideEngWords.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('hideEngWord', JSON.stringify(item.style.display))
            if (localStorage.getItem('hideEngWord') === 'none' ) {
                item.style.display = localStorage.getItem(JSON.parse('hideEngWord'))
            } else if(localStorage.getItem('hideEngWord') === 'table-cell') {
                item.style.display = localStorage.getItem(JSON.parse('hideEngWord'))
            }
        })
    }
})

Comments

[Winrous]

Попробовал так реализовать

window.onload = () => {
    let arrEnWords = document.querySelectorAll('.english-word')
    let arrRuWords = document.querySelectorAll('.russian-word')

    if (localStorage.getItem('hideEngWords') === 'none') {
        arrEnWords.forEach(item => item.style.display = JSON.parse('hideEngWords'))
    } else if(localStorage.getItem('hideEngWords') === 'table-cell') {
        arrEnWords.forEach(item => item.style.display = JSON.parse('hideEngWords'))
    }

    if (localStorage.getItem('hideRusWords') === 'none') {
        arrRuWords.forEach(item => item.style.display = JSON.parse('hideEngWords'))
    } else if (localStorage.getItem('hideRusWords') === 'table-cell') {
        arrRuWords.forEach(item => item.style.display = JSON.parse('hideEngWords'))
    }
}

Answer 1

[Alex]

Вы должны прятать/показывать слова не только по клику, но и устанавливать начальное состояние сразу после загрузки страницы

Comments

[Winrous]

Это нужно реализовать с помощью window , внутри этих двух условных операторов ?

if (localStorage.getItem('hideEngWord') === 'none' ) {
                item.style.display = localStorage.getItem(JSON.parse('hideEngWord'))
            } else if(localStorage.getItem('hideEngWord') === 'table-cell') {
                item.style.display = localStorage.getItem(JSON.parse('hideEngWord'))
            }