使用本地存储存储图像背景位置 jquery for chrome extension

Question

因此，当我单击一个按钮时，应该发生的是背景图像中心本身，然后当我再次单击它时，它会将背景位置设置为取消设置。但是，我的问题是我需要保留用户的背景位置选择，而不是重置为未设置。

这是我的 html 按钮：

<input type="button" id="centerImgBackground" value="Center Image" name="background-image-center">

这是我的 Jquery/JS:

window.onload=function(){
  isImgNotCentered = true;  
  localStorage.setItem("toCenter","center center");                                                                 
  localStorage.setItem("unCenter","unset");                                                               
  $("#centerImgBackground").click(function(){                                                                                                                                      
    if(isImgNotCentered){                                                               
      $('body').css('background-position', localStorage.getItem("toCenter"));                                                                            
      isImgNotCentered = false;                                                                            
   }                                                                       
   else {                                                                                                                  
      $('body').css('background-position',localStorage.getItem("unCenter"));

      isImgNotCentered = true;                                                                                                                                             
   }                                                                                                                                             
 });

}

Answer 1

我已经试着弄清楚你到底需要什么，所以我认为你正在尝试这样做：

window.onload=function(){
  isImgNotCentered = true;  


  $("#centerImgBackground").click(function(){                                                                     
    localStorage.setItem("toCenter","center center");                                                             
    if(isImgNotCentered){                                                               
      $('body').css('background-position', localStorage.getItem("toCenter"));                                                                            
      isImgNotCentered = false;                                                                            
   }                                                                       
   else {                                                                                                           
      localStorage.setItem("unCenter","unset");            
      $('body').css('background-position',localStorage.getItem("unCenter"));

      isImgNotCentered = true;                                                                                                                                             
   }                                                                                                                                             
 });

}

Answer 2

正确的做法是：http://jsfiddle.net/xpvt214o/229813/

function setBGToUnset(){
    setStyle("unset");
}

function setBGToCenter(){
    setStyle("center center");
}

function setStyle(value){
      localStorage.setItem("style",value);                
    $('body').css('background-position', localStorage.getItem("style"));  
    console.log("style saved: "+value);
}

$(document).ready(function(){
    var style = localStorage.getItem("style");
  console.log("default style: "+style);
    if(style != undefined && style === "unset"){
        setBGToUnset();
    } else {
        setBGToCenter();
    }
    $("#centerImgBackground").on("click", function(){
        var style = localStorage.getItem("style");
        if(style != undefined && style === "unset"){
            setBGToCenter();
        } else {
            setBGToUnset();
        }
    });
});

不要忘记取消阻止第三方 cookie 和站点数据以进行测试 link

Answer 3

简短易懂：

$(document).ready(function(){
    localStorage.setCentered == 'center' && $('body').css('background-position','center center');

    $('#centerImgBackground').on('click', function(){
        localStorage.setCentered == 'center'? 
             ($('body').css('background-position','unset'),
             localStorage.setCentered = 'unset') :
             ($('body').css('background-position','center center'),
             localStorage.setCentered = 'center');
    });
});