Ищете значение LocalStorage, которое постоянно меняется

Question

Надеюсь, я смогу объяснить мою проблему так, чтобы это имело смысл.

Я изменяю темы CSS одним нажатием кнопки, и когда нажимается кнопка определенной темы, она сохраняет это имя класса в LocalStorage, но поскольку ключ и значение LocalStorage постоянно меняются, я просто хочу вызывать все, что устанавливается в localstorage после клика, а не определенного значения. Я использую jQuery для нажатия кнопок, и я включил свой код ниже, любая помощь будет принята с благодарностью.

$(document).ready(function(){

    $('#dark').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-dark');
        localStorage.clear();
        localStorage.setItem('theme-dark', ['theme-dark']);
        localStorage.getItem('theme-dark');
    });

    $('#light').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-light');
        localStorage.clear();
        localStorage.setItem('theme-light', ['theme-light']);
        localStorage.getItem('theme-dark');
    });

    $('#beaker').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-beaker');
        localStorage.clear();
        localStorage.setItem('theme-beaker', ['theme-beaker']);
        localStorage.getItem('theme-dark');
    });

    $('#outrun').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-outrun');
        localStorage.clear();
        localStorage.setItem('theme-outrun', ['theme-outrun']);
        localStorage.getItem('theme-dark');
    });

    var localItem = localStorage.getItem('theme-outrun');

    $('body').addClass(localItem);

});

Answer 1

вы можете использовать один и тот же ключ для всех localstorage.setItem и getItem

или

в конце сделайте это

var localItem  = localStorage.getItem(Object.keys(localStorage)[0])

$('body').addClass(localItem);

Answer 2

Используйте одну клавишу для установки различных тем в локальном хранилище

$(document).ready(function(){

    $('#dark').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-dark');
        localStorage.clear();
        localStorage.setItem('theme', ['theme-dark']);
        localStorage.getItem('theme');
    });

    $('#light').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-light');
        localStorage.clear();
        localStorage.setItem('theme', ['theme-light']);
        localStorage.getItem('theme');
    });

    $('#beaker').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-beaker');
        localStorage.clear();
        localStorage.setItem('theme', ['theme-beaker']);
        localStorage.getItem('theme');
    });

    $('#outrun').click(function(){
        $('#app-root').removeClass();
        $('#app-root').addClass('theme-outrun');
        localStorage.clear();
        localStorage.setItem('theme', ['theme-outrun']);
        localStorage.getItem('theme');
    });

    var localItem = localStorage.getItem('theme');

    $('body').addClass(localItem);

});