在提交時在本地保存表單更改

我有一個<select>元素，我想用它來更改我的網頁的背景。我獲得了成功改變的背景（儘管以一種相當不雅的方式），並且我想知道是否有一種簡單的方法來「保存」這種方式，以便每當用戶離開並返回到網頁時，背景是他們選擇。在提交時在本地保存表單更改

我正在用cookie和localStorage來修補，以實現這一點，但從來沒有得到任何工作。

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

來源

2014-11-24 Keenan Payne

側記：您應該只添加一個類到主體或其他元素，並將所有這些繁瑣的細節置於CSS樣式中。 – 2014-11-24 17:53:13

Cookie應該適用於您的情況。如果你已經嘗試使用Cookie，然後顯示你的代碼。 – WisdmLabs 2014-11-24 17:54:25

如果你是「修補cookies和localStorage」，告訴我們你有什麼。否則，做一些自己搜索並學習如何使用[cookies]（http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie）或[local存儲（https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage）。 – hon2a 2014-11-24 17:55:26

您可以使用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使用前存在它雖然。

來源

2014-11-24 18:16:38

這裏是一個jQuery插件，用於設置和讀取Cookie。你甚至可以定義到期時間。 https://github.com/carhartl/jquery-cookie

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


});

來源

2014-11-24 17:58:53 Malarky44

在提交時在本地保存表單更改

回答

相關問題