使用 sessionstorage 保存暗模式

Question

我使用以下方法成功将暗模式添加到我的网站 This fiddle

JS:

$('#mode').change(function(){   

if ($(this).prop('checked'))
{
    $('body').addClass('dark-mode');
}
else
{
    $('body').removeClass('dark-mode');
}
});

但是，刷新页面时，主题切换回来很明显。我找不到如何使用会话存储在域中保持暗模式。

有人可以帮助我吗？谢谢！

Answer 1

您可以使用本地存储来存储数据

function darkmode(){
    $('body').addClass('dark-mode');
    localStorage.setItem("mode", "dark");
    }



function nodark(){
        $('body').removeClass('dark-mode');
        localStorage.setItem("mode", "light");
        }

  if(localStorage.getItem("mode")=="dark")
        darkmode();
  else
    nodark();

$('#mode').change(function(){   

    if ($(this).prop('checked'))
    {
        darkmode();
    }
    else
    {
        nodark();
    }

});

使用 sessionstorage 保存暗模式

Using sessionstorage for saving dark mode

html

javascript

css

mode

sessionstorage