Сохраните изменения формы локально при отправке

Question

У меня есть элемент <select>, который я хочу использовать для изменения фона моей веб-страницы. Я получил фон для успешного изменения (хотя и довольно неэлегантно), и мне было интересно, есть ли простой способ «сохранить» это, чтобы всякий раз, когда пользователь уходит и возвращается на веб-страницу, фон - это то, что они выбрал.

Я занимался куки и местным хранилищем, чтобы выполнить это, но так и не получил ничего, чтобы работать.

JSFiddle here

HTML:

<select id="settingBackground"> 
    <option name="default">Default</option> 
    <option name="thankshaking">Background 2</option> 
</select> 

JavaScript:

$(document).ready(function() { 
    $('#settingBackground').on('change', function() { 
     if (this.value == "Default") { 
      // Change background 
      $('body').css("background", "#1e8cd4"); 
      $('body').css("color", "#fff"); 
     } else if (this.value == "Background 2") { 
      // Change background 
      $('body').css("background", "url('http://i.imgur.com/cV7PKqh.jpg') no-repeat center center fixed"); 
      $('body').css("background-size", "cover"); 
      $('body').css("color", "#000"); 
     } 
    }); 
}); 

Answer 1

Вы можете использовать localStorage следующим образом:

$(document).ready(function() { 
    var selectedBG = localStorage.getItem("selectedBg"); 
    if (selectedBG) switchBg(selectedBG); 
    $('#settingBackground').on('change', function() { 
    localStorage.setItem("selectedBg", this.value); 
    switchBg(this.value); 
    }); 

    function switchBg(bg) { 
    if (bg == "Default") { 
     // Change background 
     $('body').css("background", "#1e8cd4"); 
     $('body').css("color", "#fff"); 

    } else if (bg == "Background 2") { 
     // Change background 
     $('body').css("background", "url('http://i.imgur.com/cV7PKqh.jpg') no-repeat center center fixed"); 
     $('body').css("background-size", "cover"); 
     $('body').css("color", "#000"); 
    } 
    } 
}); 

Updated Fiddle

Убедитесь localStorage существует перед использованием это все же.

Answer 2

Вот в Jquery плагин для установки и чтения куки. Вы даже можете определить время истечения срока действия. https://github.com/carhartl/jquery-cookie

Чтобы установить куки от выбора сделать что-то вроде этого:

$(function(){ 

var background = $.cookie('background') || false; 

function changeBackground(background){ 
    if(background !== false){ 
     $('body').addClass(background); 
     $.cookie('background', background); 
    } 
} 

changeBackground(background); 



$('body').on('change', '#settingBackground', function(){ 
    changeBackground($(this).val()); 
}); 


});