时间戳

首页 > 解决方案 > 使用本地存储来存储图像背景位置，使用 jquery 进行 chrome 扩展

jquery - 使用本地存储来存储图像背景位置，使用 jquery 进行 chrome 扩展

问题描述

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

这是我的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;                                                                                                                                             
   }                                                                                                                                             
 });

}

标签： jquerygoogle-chrome-extensionlocal-storagebackground-position

解决方案

这是一个正确的方法：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 和站点数据以进行测试链接

推荐阅读