希望获得不断变化的 LocalStorage 值答案

【问题标题】：Looking to get LocalStorage value that changes constantly希望获得不断变化的 LocalStorage 值
【发布时间】：2019-09-23 16:58:25
【问题描述】：

希望我能用有意义的方式解释我的问题。

我在单击按钮时更改 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);

});

【问题讨论】：

使用一个键名而不是多个键名
你这个绝对的传奇，就这样，非常感谢！

标签： javascript jquery html css local-storage

【解决方案1】：

一键设置本地存储中的不同主题

$(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);

});

【讨论】：

【解决方案2】：

您可以对所有 localstorage.setItem 和 getItem 使用相同的密钥

或

最后这样做

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

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

【讨论】：

Brrr, Object.keys(localStorage)[0]... 存储对象有一个key() 方法，请改用它。