Использование localStorage для сохранения стилей

Question

У меня есть две кнопки, и я могу изменить свою таблицу стилей, как только я нажму на эти кнопки. Однако, как только я обновляюсь, или когда я перехожу на следующую страницу своего веб-сайта, таблица стилей возвращается к оригиналу и не остается, как пользователь ее установил. Я искал похожие примеры, но нашел только те, которые используют файлы cookie, и я хотел знать, как это можно сделать с помощью localStorage. Заранее спасибо ...

<script> 
    function swapStyleSheet(sheet) { 
    document.getElementById('pagestyle').setAttribute('href', sheet); 
    } 
</script> 

<div class="change"> 
    <h6>Change Stylesheet</h6> 
    <button onclick="swapStyleSheet('css/style2.css')">Dark</button> 
    <button onclick="swapStyleSheet('css/style.css')">Light</button> 
</div> 

Answer 1

Да. Вы можете использовать следующее:

localStorage.setItem('currentStyleSheet', 'css/style.css'); 
function swapStyleSheet(sheet) { 
    document.getElementById('pagestyle').setAttribute('href', sheet); 
    localStorage.setItem('currentStyleSheet', sheet); 
} 
window.onload = function() { 
    document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('currentStyleSheet')); 
}