本地存储useage获得2个不同值的同名css属性

Question

我怎样才能使用显示无/块使用2个按钮，我需要一个显示没有，而其他被阻止，反之亦然点击？我试过这个，但是C不起作用。

<input id="widen-page" type="button" value="Go Full Width"></button> 
<input id="narrow-page" type="button" value="Go Fixed Width"></button> 

$('#widen-page').on('click', function() { 
    $('.pagebody').css('max-width','100%'); 
    $('#widen-page').css('display','none'); 
    $('#narrow-page').css('display','block'); 

    //pagebody 
    localStorage.setItem('max-width','100%'); 
    //wide-page 
    localStorage.setItem('display','none'); 
    //narrow-page 
    localStorage.setItem('display','block'); 
}); 
$('#narrow-page').on('click', function() { 
    $('.pagebody').css('max-width',''); 
    $('#widen-page').css('display','block'); 
    $('#narrow-page').css('display','none'); 

    //pagebody 
    localStorage.setItem('max-width',''); 
    //wide-page 
    localStorage.setItem('display','block'); 
    //narrow-page 
    localStorage.setItem('display','none'); 
}); 
var maxwidth = localStorage.getItem('max-width'); 
var display = localStorage.getItem('display'); 
var display = localStorage.getItem('display'); 
$('.pagebody').css('max-width', maxwidth); 
$('#widen-page').css('display', display); 
$('#narrow-page').css('display', display); 

Answer 1

对于初学者来说，localStorage的是键：值店，所以你需要确保你要保存的每个项目有拥有唯一关键。目前，您正在将两个按钮合并为一个按键。例如，你可以使用localStorage.setItem("widen_page_display","none")。

Answer 2

这个作品

$('#widen-page').on('click', function() { 
    $('.pagebody').css('max-width','100%'); 
    $('#widen-page').css('display','none'); 
    $('#narrow-page').css('display','block'); 
    localStorage.setItem('max-width','100%'); 
    localStorage.setItem('narrowmypage','block'); 
    localStorage.setItem('widenmypage','none'); 
}); 
$('#narrow-page').on('click', function() { 
    $('.pagebody').css('max-width',''); 
    $('#widen-page').css('display','block'); 
    $('#narrow-page').css('display','none'); 
    localStorage.setItem('max-width',''); 
    localStorage.setItem('narrowmypage','none'); 
    localStorage.setItem('widenmypage','block'); 
}); 
    var maxwidth = localStorage.getItem('max-width'); 
    var fixedwidth = localStorage.getItem('widenmypage'); 
    var fullwidth = localStorage.getItem('narrowmypage'); 
    $('.pagebody').css('max-width', maxwidth); 
    $('#widen-page').css('display', fixedwidth); 
    $('#narrow-page').css('display', fullwidth);