Changing padding with localstorage does not work

I made a two buttons for changing the padding on my website. They work, however I have to set to padding for nav, main and footer manually in the CSS. Here is the code:

main {
    padding: 20px 25%;
}
footer {
    padding: 5px 25%;
}
nav {
    padding: 0 25%;
}
    var padding = 15;

    $('#paddingPlus').click(function() {
        switch(padding) {
            case 0:
                changePadding(5);
                padding = 5;
                break;
            case 5:
                changePadding(10);
                padding = 10;
                break;
            case 10:
                changePadding(15);
                padding = 15;
                break;
            case 15:
                changePadding(20);
                padding = 20;
                break;
            case 20:
                changePadding(25);
                padding = 25;
                break;
            case 25:
                changePadding(30);
                padding = 30;
                break;
            case 30:
                alert('You have reached the maximum amount of padding!');
                break;
        }
    });

    $('#paddingMinus').click(function() {
        switch(padding) {
            case 0:
                alert('You have reached the minimum amount of padding!');
                break;
            case 5:
                changePadding(0);
                padding = 0;
                break;
            case 10:
                changePadding(5);
                padding = 5;
                break;
            case 15:
                changePadding(10);
                padding = 10;
                break;
            case 20:
                changePadding(15);
                padding = 15;
                break;
            case 25:
                changePadding(20);
                padding = 20;
                break;
            case 30:
                changePadding(25);
                padding = 25;
                break;
        }
    });

    function changePadding(pad) {
        $('nav').css('padding', '0 ' + pad + '%');
        $('main').css('padding', '20px ' + pad + '%');
        $('footer').css('padding', '5px ' + pad + '%');
    }

I tried to do this with localstorage so that it saves the padding, but it doesn’t work and chrome shows me no error-message. Here is the code:

main { }
footer { }
nav { }
    switch(localStorage.getItem('padding')) {
        case 0:
            changePadding(0);
            localStorage.setItem('padding', 0);
            break;
        case 5:
            changePadding(5);
            localStorage.setItem('padding', 5);
            break;
        case 10:
            changePadding(10);
            localStorage.setItem('padding', 10);
            break;
        case 15:
            changePadding(15);
            localStorage.setItem('padding', 15);
            break;
        case 20:
            changePadding(20);
            localStorage.setItem('padding', 20);
            break;
        case 25:
            changePadding(25);
            localStorage.setItem('padding', 35);
            break;
        case 30:
            changePadding(30);
            localStorage.setItem('padding', 30);
            break;
        default:
            changePadding(15);
            localStorage.setItem('padding', 15);
    }

    $('#paddingPlus').click(function() {
        switch(localStorage.getItem('padding')) {
            case 0:
                changePadding(5);
                localStorage.setItem('padding', 5);
                break;
            case 5:
                changePadding(10);
                localStorage.setItem('padding', 10);
                break;
            case 10:
                changePadding(15);
                localStorage.setItem('padding', 15);
                break;
            case 15:
                changePadding(20);
                localStorage.setItem('padding', 20);
                break;
            case 20:
                changePadding(25);
                localStorage.setItem('padding', 25);
                break;
            case 25:
                changePadding(30);
                localStorage.setItem('padding', 30);
                break;
            case 30:
                alert('You have reached the maximum amount of padding!');
                break;
        }
    });

    $('#paddingMinus').click(function() {
        switch(localStorage.getItem('padding')) {
            case 0:
                alert('You have reached the minimum amount of padding!');
                break;
            case 5:
                changePadding(0);
                localStorage.setItem('padding', 0);
                break;
            case 10:
                changePadding(5);
                localStorage.setItem('padding', 5);
                break;
            case 15:
                changePadding(10);
                localStorage.setItem('padding', 10);
                break;
            case 20:
                changePadding(15);
                localStorage.setItem('padding', 15);
                break;
            case 25:
                changePadding(20);
                localStorage.setItem('padding', 20);
                break;
            case 30:
                changePadding(25);
                localStorage.setItem('padding', 25);
                break;
        }
    });

    function changePadding(pad) {
        $('nav').css('padding', '0 ' + pad + '%');
        $('main').css('padding', '20px ' + pad + '%');
        $('footer').css('padding', '5px ' + pad + '%');
    }

I would really appreciate it if someone could tell me where my error is. Thanks in advance

Answer

To expand on the previous answer, does this help?

$('#paddingPlus').click(function() {
   let padding = parseInt(localStorage.getItem('padding'));
   if (padding >== 30) {
      alert('You have reached the maximum amount of padding!');
   } else {
      padding += 5;
      changePadding(padding);
   }
}


$('#paddingMinus').click(function() {
   let padding = parseInt(localStorage.getItem('padding'));
   if (padding === 0) {
      alert('You have reached the minimum amount of padding!');
   } else {
      padding -= 5;
      changePadding(padding);
   }
}

function changePadding(pad) {
        localStorage.setItem('padding', pad);
        $('nav').css('padding', '0 ' + pad + '%');
        $('main').css('padding', '20px ' + pad + '%');
        $('footer').css('padding', '5px ' + pad + '%');
}