Change css background image on a div for multiple pages?

Question

I have this CSS:

div[data-role="page"]{ 
min-height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
border: 0px;
background-image:url('../img/blue_background.jpg');}

and this is my function:

Note: on the variables initialized in the function, the val() is from a selectbox that when changed, is saved in localStorage.

function saveParam(){
var result=$("#param_results option:selected").val();
var scan=$("#param_scan option:selected").val();
var scan_speed=$("#param_scan_speed option:selected").val();
var scan_bg=$("#param_scan_bg option:selected").val();
var font=$("#param_font option:selected").val();
var screen_bg=$("#param_screen_bg option:selected").val();
var waiting_time=$("#param_waiting_time option:selected").val();

window.localStorage.setItem("param_results", result);
window.localStorage.setItem("param_scan", scan);
window.localStorage.setItem("param_scan_speed", scan_speed);
window.localStorage.setItem("param_scan_bg", scan_bg);
window.localStorage.setItem("param_font", font);
window.localStorage.setItem("param_screen_bg", screen_bg);
window.localStorage.setItem("param_waiting_time", waiting_time);


//$('div[data-role="page"]').css("background-image", "url('../img/green.jpg')");

back();}

I have several html pages, all of them have the div[data-role="page"] so all of them have the same background, etc... but when param_screen_bg is changed, I want to permanently change the background image to another but it's not working. The comment line at the end it's just my attempt to try to change the background but it's still not working.

EDIT: https://jsfiddle.net/42zbcbge/1/

on this jsfiddle is a small example of what i want. when you press the save button, i want to change the background on the css and therefor on the page too but it's not changing

Answer 1

Hey i didn't completely understood the code which you have added. But, i guess you are using selectbox and passing image url in option's value. So while fetching, you should only use the id of selectbox, like :

var screen_bg=$("#param_screen_bg").val();

instead of

var screen_bg=$("#param_screen_bg option:selected").val();

var bg_image_value = localStorage.getItem("param_screen_bg");

if(bg_image_value != null && bg_image_value != '') {
   $('div[data-role="page"]').css("background-image", 'url('+bg_image_value+')' ); 
}

May be try adding code in codepen or jsfiddle.

Answer 2

You're setting the values in the localStorage, but you never seem to get 'm. So, you could, for example, do something like this:

jQuery().ready(function() //do when page is loaded
{
  if(window.localStorage.getItem("param_screen_bg") !== null) //check if value is set in localStorage
  {
    //get value from localStorage and apply it to the div:
    $('div[data-role="page"]').css("background-image", window.localStorage.getItem("param_screen_bg"));
  }
});

I'm making some assumptions in this sample though, but I think you can handle it ;)