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="expert">
    <p>Interface mode expert... Recharge la page et je serai sauvegardé !</p>
</div>

<button class="toggle"></button>

CSS

.view-mode {
    display: none;
}
button {
    padding: 10px;
}

JavaScript

jQuery(document).ready(function(){   
    var defaultMode = 'simple';
    var displayMode = '';
    var localStorageItem = 'monapp.displayMode';
    var $viewElement = jQuery('.view-mode');
    var $toggle = jQuery('.toggle');
    
    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) {
        $toggle.text(mode);
        $toggle.data('mode',mode);
        $viewElement.each(function(){jQuery(this).hide()});
        jQuery('.view-mode'+'#'+mode).toggle('slow');
    }
    
    getDisplayMode().then(function(mode){
        displayMode = mode;
        updateView(mode);
    });
    
    $toggle.click(function(evt){
        var mode = jQuery(this).data('mode');
        mode = mode === 'simple' ? 'expert' : 'simple';
        localStorage.setItem(localStorageItem, mode);
        updateView(mode);
    });
});