2012-12-23 220 views
1

我一直在尋找所有的互聯網,似乎無法找到與我的需求相關的文章。 我從來沒有與之前的cookie的工作,但我認爲這可能是一個簡單的任務... 原來我完全錯了:/記住背景顏色/顏色與Cookie

基本上我有一個顏色選擇器,我想對瀏覽器記住顏色每次設置時都要進行設置,這樣當他們回到站點時,背景顏色與他們離開時的顏色相同。

我使用這個顏色選擇器http://lindekleiv.bitbucket.org/colorpicker/

有了這個代碼

$(document).ready(function(){ 
    $('#colorpicker').colorPicker({ 
    colorChange: function(e, ui) { 
    $('body').css({backgroundColor: ui.color}) 
    } 
    }); 

    $('#colorpicker').colorPicker('setColor', 0, 0, 6, 1); 
}) 

預先感謝任何幫助:) 克里斯

回答

2

你可以使用這個非常簡單的cookie處理對象,我寫:

var Cookie = { 
    set: function(name, value, days) { 
     if (days) { 
      var date = new Date(); 
      date.setTime(date.getTime()+(days*24*60*60*1000)); 
      var expires = "; expires="+date.toGMTString(); 
     } else { var expires = ""; } 

     document.cookie = name + "=" + value + expires + "; path=" + location.pathname; 
    }, 

    unset: function(name) { Cookie.set(name, "", -1); }, 

    get: function(name) { 
     var search = new RegExp(name + "=([^;]*);"); 
     var result = search.exec(document.cookie); 
     return result ? result[1] : undefined; 
    } 
}; 

所以你的代碼會變成:

$(document).ready(function(){ 
    $('#colorpicker').colorPicker({ 
     colorChange: function(e, ui) { 
      $('body').css({backgroundColor: ui.color}); 
      Cookie.set('bgc', $('body').css('background-color'), 365); 
     } 
    }); 

    $('#colorpicker').colorPicker('setColor', 0, 0, 6, 1); 

    if (Cookie.get('bgc')) { 
     $('body').css({ backgroundColor: Cookie.get('bgc') }); 
    } 
}); 
+0

我實現了我的Cookie功能到你的代碼在我的回答以上。 在註釋中查看你的代碼,就好像你在'return'語句之後執行'Cookie.set('bgr',...)'。請提供jsfiddle的完整示例。 – 2012-12-24 14:26:20

0

它實際上很簡單。只需將使用此背景顏色的餅乾:

document.cookie = "color=" + color; 

而且記得使用這個保存的一個cookie:

var color = loadCookies(); 

function loadCookies(){ 
    var cookie_string = document.cookie ; 
    if (cookie_string.length != 0) { 
     var cookie_value = cookie_string.match (
        '(^|;)[\s]*' + 
        "color" + 
        '=([^;]*)'); 
     return decodeURIComponent (cookie_value[2]) ; 
    } 
}