how to save dark-mode preference by using session storage

Question

I'd like to store user's preferences on dark-mode by using session storage.
The code below is the toggle function for the dark mode.

function toggleDarkMode() {
    var dataTheme = $('body').attr('data-theme');

    if(dataTheme === 'dark') {
        $('body').attr('data-theme', 'light');
    } else {
        $('body').attr('data-theme', 'dark');
    }
};

when firing dark mode, I change the data-theme of body tag of JSP file such as <body data-theme="light"> to <body data-theme="dark">

Answer 1

You have to use sessionStorage for this purpose:

To store a value: sessionStorage.setItem(key,value);
To access a value: sessionStorage.getItem(key);

function toggleDarkMode()
{
//Check if there is a value in Session Storage or Not!
if(sessionStorage.getItem('theme') != '')
{
    $('body').attr('data-theme', 'light');
}
else
{
    theme=sessionStorage.getItem('theme');  //Get Value of theme from session
    $('body').attr('data-theme',theme);  
}
var dataTheme = $('body').attr('data-theme');

if(dataTheme === 'dark') {
    $('body').attr('data-theme', 'light');
    sessionStorage.setItem("theme", "light"); // Store the value in Session Storage
} else {
    sessionStorage.setItem("theme", "dark"); // Store the value in Session Storage
    $('body').attr('data-theme', 'dark');
}
};

how to save dark-mode preference by using session storage

Question

1 answers

solution1
0 2021-05-01 11:22:43

how to save dark-mode preference by using session storage

Question

1 answers

solution1 0 2021-05-01 11:22:43

solution1
0 2021-05-01 11:22:43