JSFiddle - React, Tailwind, and code Playground

HTML

<div class="view-mode" id="simple">
    <p>Inteface mode simple...Recharge la page et je serai sauvegardé !</p>
</div>

<div class="view-mode" id="advanced">
    <p>Interface mode avancé... Recharge la page et je serai sauvegardé !</p>
</div>

<button class="toggle" data-mode="simple">Simple</button>
<button class="toggle" data-mode="advanced">Avancé</button>

CSS

.view-mode {
    display: none;
}

JavaScript

jQuery(document).ready(function(){   
    var defaultMode = 'advanced';
    var displayMode = '';
    var localStorageItem = 'monapp.displayMode';
    var $viewElement = jQuery('.view-mode');
    
    function getDisplayMode() {
        var deferred = jQuery.Deferred();
        jQuery.when(localStorage.getItem(localStorageItem))
        .then(function(mode){
            if(mode){
                deferred.resolve(mode);
            } else {
                localStorage.setItem(localStorageItem, defaultMode);
                deferred.resolve(defaultMode);
            }
            
        })
        return deferred.promise();
    }
    
    function updateView(mode) {
        $viewElement.each(function(){jQuery(this).hide()});
        jQuery('.view-mode'+'#'+mode).show();
    }
    
    getDisplayMode().then(function(mode){
        displayMode = mode;
        updateView(mode);
    });
    
    jQuery('.toggle').click(function(evt){
        var mode = jQuery(this).data('mode');
        localStorage.setItem(localStorageItem, mode);
        updateView(mode);
    });
});