使用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'));
}