使用本地存储更改填充不起作用

Question

我在网站上制作了两个按钮来更改填充。它们可以工作，但我必须在CSS中手动设置导航、主菜单和页脚的填充。这是代码：

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 + '%');
}

我试着用localstorage来保存填充，但它不起作用，chrome也没有向我显示错误消息。这是代码：

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 + '%');
}

如果有人能告诉我我的错误在哪里，我将不胜感激。提前感谢

Answer 1

要扩展前面的答案，这有帮助吗？

$('#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 + '%');
}

Answer 2

尝试将从localStorage.getItem('padding')获得的填充转换为Number(即parseInt(localStorage.getItem('padding'))(。当您从localstorage获得一个项目时，它会返回一个String，因此您的case不起作用。

Answer 3

问题的部分原因是在处理pad值时，类型强制从字符串转换为整数，还因为您的第二个代码示例没有更新localStorage值。

您可以通过简单地添加到每个事件处理程序中的值而不是使用switch语句，以及通过从localStorage读取值而不是依赖全局变量来解决这两个问题并简化代码。试试这个：

<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>
<button class="padding" data-change="5">+</button>
<button class="padding" data-change="-5">-</button>

function setPadding(pad, change) {
pad = pad == null ? 15 : parseInt(pad, 10);
pad += (parseInt(change, 10) || 0);
if (pad < 0) {
alert('You have reached the minimum amount of padding!');
return;
}
if (pad > 30) {
alert('You have reached the minimum amount of padding!');
return;
}
localStorage.setItem('padding', pad);
$('nav').css('padding', '0 ' + pad + '%');
$('main').css('padding', '20px ' + pad + '%');
$('footer').css('padding', '5px ' + pad + '%');
}
// retrieve the value and set when the page loads
setPadding(localStorage.getItem('padding'));
// update the value when either button is clicked
$('.padding').click(function() {{
setPadding(localStorage.getItem('padding'), this.dataset.change);
});

这是jsFiddle中的一个工作示例，因为SO片段被限制访问localStorage。