使用本地存储存储图像背景位置 jquery for chrome extension
use local storage to store image background position with jquery for chrome extension
因此,当我单击一个按钮时,应该发生的是背景图像中心本身,然后当我再次单击它时,它会将背景位置设置为取消设置。但是,我的问题是我需要保留用户的背景位置选择,而不是重置为未设置。
这是我的 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;
}
});
}
我已经试着弄清楚你到底需要什么,所以我认为你正在尝试这样做:
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;
}
});
}
正确的做法是: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
简短易懂:
$(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');
});
});
因此,当我单击一个按钮时,应该发生的是背景图像中心本身,然后当我再次单击它时,它会将背景位置设置为取消设置。但是,我的问题是我需要保留用户的背景位置选择,而不是重置为未设置。
这是我的 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;
}
});
}
我已经试着弄清楚你到底需要什么,所以我认为你正在尝试这样做:
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;
}
});
}
正确的做法是: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
简短易懂:
$(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');
});
});