Question

我有两个按钮，一旦点击这些按钮，我就可以更改样式表。但是，一旦我刷新或者当我转到我网站的下一页时，样式表将恢复原始状态，并且不会保留用户设置的方式。我一直在寻找类似的例子，但只找到那些使用cookies的人，我想知道如何使用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'));
}

使用localStorage保留样式表

1 个答案: