Question

我正在尝试创建一个用户可以动态更改div的背景图像的应用程序。让我烦恼的是我无法在本地存储中保存div的背景。

这是我提出的代码，但它不起作用：

保存::

$(".abc").on('click', function(){
localStorage.setItem('contentbodybg', $(".bodybg").css('backgroundImage'));
});

要检索::

if (localStorage.getItem('contentbodybg') === null) {
localStorage.setItem('contentbodybg', $(".bodybg").css('backgroundImage'));
} else {
$(".bodybg").html(localStorage.getItem('contentbodybg'));
}

Answer 1

backgroundImage 无效的CSS属性，请尝试使用background-image

$(".abc").on('click', function(){
    localStorage.setItem('contentbodybg', $(".bodybg").css('background-image'));
    });

要检索

if (localStorage.getItem('contentbodybg') === null) {
localStorage.setItem('contentbodybg', $(".bodybg").css('background-image'));
} else {
$(".bodybg").html(localStorage.getItem('contentbodybg'));
}

Answer 2

使用background-image而不是backgroundImage，并检索一些类似于：

的内容

$(".bodybg").css("background-image", localStorage.getItem('contentbodybg'));

Answer 3

错误的css属性，然后你错误地改变了目标元素的html ......

这应该有效：

$(".abc").on('click', function(){
   localStorage.setItem('contentbodybg', $(".bodybg").css('background-image'));
});

然后：

if (localStorage.getItem('contentbodybg') === null) {
   localStorage.setItem('contentbodybg', $(".bodybg").css('background-image'));
} else {
   $(".bodybg").css('background-image', localStorage.getItem('contentbodybg'));
}

localStorage保存并检索元素的CSS

3 个答案: