Save form changes locally on submission

Question

I have a <select> element that I want to use to change the background of my web page. I got the background to successfully change (although in a pretty inelegant manner), and I was wondering if there is an easy way to "save" this so that whenever the user leaves and comes back to the web page, the background is what they chose.

I was tinkering around with cookies and localStorage to accomplish this but never got anything to work.

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");
        }
    });
});

Side-note: You should just add a single class to the body or other element and put all those fiddly details in CSS styles. — iCollect.it Ltd, Nov 24 '14 at 17:53
Cookies should work in your case. If you have tried using Cookie then show your code. — Domain, Nov 24 '14 at 17:54
If you were "tinkering with cookies and localStorage", show us what you've got. Otherwise, do some searching yourself and learn how to use [cookies](http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) or [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). — hon2a, Nov 24 '14 at 17:55
@hon2a I didn't have the code because I scrapped it (I was working on it last night). It looked something like this though: http://jsfiddle.net/9j3rhhof/4/ — Keenan Payne, Nov 24 '14 at 18:06

Malarky44 · Answer 1 · 2014-11-24T18:08:08.860

Here is a Jquery Plugin for setting and reading cookies. You can even define the expiration time. https://github.com/carhartl/jquery-cookie

To set the cookie from the select do something like this:

$(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());
});


});

T J · Accepted Answer · 2014-11-24T18:23:19.740

You can use localStorage as follows:

$(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

Make sure localStorage exists before using it though.

Save form changes locally on submission

2 Answers2