使用Cookie加載，保存和重置jquery值

Question

我正在一個網站上工作，在這個網站上我不得不使用滾動條添加屏幕調整，並且我使用this示例進行了調整。你可以看到下面的代碼...

HTML代碼：

<h1>Image Editor with CSS Filters and jQuery</h1> 

<!--Form for collecting image URL --> 
<form id="urlBox" class="center"> 
    <input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and start playing!"> 
    <input id="go" type="button" value="Go"> 
</form> 

<hr color="grey"> 

<!--Controls for CSS filters via range input--> 
<div class="sliders"> 
    <form id="imageEditor"> 
    <p> 
     <label for="gs">Grayscale</label> 
     <input id="gs" name="gs" type="range" min="0" max="100" value="0"> 
    </p> 

    <p> 
     <label for="blur">Blur</label> 
     <input id="blur" name="blur" type="range" min="0" max="10" value="0"> 
    </p> 

    <p> 
     <label for="br">Exposure</label> 
     <input id="br" name="br" type="range" min="0" max="200" value="100"> 
    </p> 

    <p> 
     <label for="ct">Contrast</label> 
     <input id="ct" name="ct" type="range" min="0" max="200" value="100"> 
    </p> 

    <p> 
     <label for="huer">Hue Rotate</label> 
     <input id="huer" name="huer" type="range" min="0" max="360" value="0"> 
    </p> 

    <p> 
     <label for="opacity">Opacity</label> 
     <input id="opacity" name="opacity" type="range" min="0" max="100" value="100"> 
    </p> 

    <p> 
     <label for="invert">Invert</label> 
     <input id="invert" name="invert" type="range" min="0" max="100" value="0"> 
    </p> 

    <p> 
     <label for="saturate">Saturate</label> 
     <input id="saturate" name="saturate" type="range" min="0" max="500" value="100"> 
    </p> 

    <p> 
     <label for="sepia">Sepia</label> 
     <input id="sepia" name="sepia" type="range" min="0" max="100" value="0"> 
    </p> 

    <input type="reset" form="imageEditor" id="reset" value="Reset" /> 

    </form> 
</div> 

<!--container where image will be loaded--> 
<div id="imageContainer" class="center"> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stadium.jpg"> 
</div> 

<p class="p">Demo by Vikas Lalwani. <a href="http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery" target="_blank">See article</a>.</p> 

CSS代碼：

/* General styles for the page */ 
* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    background-color: #D2D7D3; 
    font-family: monospace; 
    margin: 0 auto; 
    width: 960px; 
} 

h1 { 
    margin: 25px 0 25px 0; 
    font-size: 40px; 
    text-align: center; 
} 

hr { 
    margin: 20px 0; 
} 

form { 
    text-align: center; 
} 

/* Styles for URL box */ 

.url-box { 
    background-color: transparent; 
    display: inline-block; 
    height: 30px; 
    border: none; 
    border-bottom: 4px solid #b3b3b1; 
    padding: 0px 0px 0px 20px; 
    margin: 0px 0px; 
    width: 50%; 
    outline: none; 
    text-align: center; 
    font-size: 15px; 
    font-family: monospace; 
    font-weight: 100; 
    color: #000; 
} 

#go { 
    display: inline-block; 
    height: 50px; 
    width: 50px; 
    background-color: transparent; 
    padding: 0px; 
    border: 4px solid #b3b3b1; 
    border-radius: 50%; 
    box-shadow: none; 
    cursor: pointer; 
    outline: none; 
    text-align: center; 
    font-size: 20px; 
    font-family: monospace; 
    font-weight: 100; 
    color: #000; 
} 

/* Styles for image container*/ 

#imageContainer { 
    border: 2px solid grey; 
    border-radius: 10px; 
    padding: 5px; 
    width: 65%; 
    max-width: 600px; 
    float: left; 
    margin: 20px; 
} 

#imageContainer img { 
    border-radius: 10px; 
    width: 100%; 
} 

/* Styles for sliders*/ 

.sliders { 
    float: left; 
    border: 2px solid grey; 
    border-radius: 10px; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    padding-left: 10px; 
} 

.sliders p { 
    margin: 18px 0; 
    vertical-align: middle; 
} 

.sliders label { 
    display: inline-block; 
    margin: 10px 0 0 0; 
    width: 100px; 
    font-size: 16px; 
    color: #22313F; 
    text-align: left; 
    vertical-align: middle; 
} 

.sliders input { 
    position: relative; 
    margin: 10px 20px 0 10px; 
    vertical-align: middle; 
} 

input[type=range] { 
    /*removes default webkit styles*/ 
    -webkit-appearance: none; 
    /*fix for FF unable to apply focus style bug */ 
    border-radius: 5px; 
    /*required for proper track sizing in FF*/ 
    width: 150px; 
} 

input[type=range]::-webkit-slider-runnable-track { 
    width: 300px; 
    height: 7px; 
    background: #ABB7B7; 
    border: none; 
    border-radius: 3px; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: none; 
    height: 20px; 
    width: 20px; 
    border-radius: 50%; 
    background: #4B77BE; 
    margin-top: -6px; 
    vertical-align: middle; 
} 
input[type=range]:focus { 
    outline: none; 
} 

input[type=range]:hover { 
    cursor: pointer; 
} 


#reset { 
    display: inline-block; 
    height: 40px; 
    width: 100px; 
    background-color: transparent; 
    padding: 0px; 
    border: 4px solid #b3b3b1; 
    border-radius: 10px; 
    box-shadow: none; 
    cursor: pointer; 
    outline: none; 
    text-align: center; 
    font-size: 20px; 
    font-family: monospace; 
    font-weight: 100; 
    color: #000; 
    margin: 0 0 10px 0; 
} 

.p { 
    clear: both; 
    text-align: center; 
    padding: 40px 0 40px; 
} 

JQUERY DODE：

//on click of go(submit) button, addImage() will be called 
$("#go").click(addImage); 

//on pressing return, addImage() will be called 
$("#urlBox").submit(addImage); 


// editing image via css properties 
function editImage() { 
    var gs = $("#gs").val(); // grayscale 
    var blur = $("#blur").val(); // blur 
    var br = $("#br").val(); // brightness 
    var ct = $("#ct").val(); // contrast 
    var huer = $("#huer").val(); //hue-rotate 
    var opacity = $("#opacity").val(); //opacity 
    var invert = $("#invert").val(); //invert 
    var saturate = $("#saturate").val(); //saturate 
    var sepia = $("#sepia").val(); //sepia 

    $("#imageContainer img").css(
    "filter", 'grayscale(' + gs+ 
    '%) blur(' + blur + 
    'px) brightness(' + br + 
    '%) contrast(' + ct + 
    '%) hue-rotate(' + huer + 
    'deg) opacity(' + opacity + 
    '%) invert(' + invert + 
    '%) saturate(' + saturate + 
    '%) sepia(' + sepia + '%)' 
); 

    $("#imageContainer img").css(
    "-webkit-filter", 'grayscale(' + gs+ 
    '%) blur(' + blur + 
    'px) brightness(' + br + 
    '%) contrast(' + ct + 
    '%) hue-rotate(' + huer + 
    'deg) opacity(' + opacity + 
    '%) invert(' + invert + 
    '%) saturate(' + saturate + 
    '%) sepia(' + sepia + '%)' 
); 
} 

//When sliders change image will be updated via editImage() function 
$("input[type=range]").change(editImage).mousemove(editImage); 

// Reset sliders back to their original values on press of 'reset' 
$('#imageEditor').on('reset', function() { 
    setTimeout(function() { 
     editImage(); 
    }, 0); 
}); 

// adding an image via url box 
function addImage(e) { 
    var imgUrl = $("#imgUrl").val(); 
    if (imgUrl.length) { 
     $("#imageContainer img").attr("src", imgUrl); 
    } 
    e.preventDefault(); 
} 

我不能瞄準，是使用cookie和jquery加載，保存或重置調整值！任何想法我怎麼能做到這一點？

編輯

我需要根據這部分代碼的例子：使用一個

$(document).ready(function(){ 
    function adjustments() { 
     var br = $("#br").val(); // brightness 
     var ct = $("#ct").val(); // contrast 
     var opacity = $("#opacity").val(); //opacity 
     var saturate = $("#saturate").val(); //saturate 

     $("#page-wrap, #preloader").css("filter", 'brightness(' + br + 
                '%) contrast(' + ct + 
                '%) opacity(' + opacity + 
                '%) saturate(' + saturate + 
                '%) '); 
     $("#page-wrap, #preloader").css("-webkit-filter", 'brightness(' + br + 
                  '%) contrast(' + ct + 
                  '%) opacity(' + opacity + 
                  '%) saturate(' + saturate + 
                  '%) '); 
    } 
    $("input[type=range]").change(adjustments).mousemove(adjustments); 
    $('#adjustments-form').on('reset', function() {setTimeout(function() {adjustments();},0);}); 
}); 

Answer 1

您可以管理Cookie（獲取，添加，更新等。）在你的腳本這兩個例子：

https://github.com/js-cookie/js-cookie

https://github.com/carhartl/jquery-cookie

然後簡單：

1. 檢查在頁面加載cookie的存在：
2. 如果cookie是可用的，那麼負載特性，
3. 如果的cookie不存在 - 創建一個新的cookie與當前屬性。

一個例子（使用jQuery餅乾插件）

設置cookie和存儲一些數據：

// prepare and store data 
var props = { 
    name:'John', 
    age:'31' 
}; 
$.cookie('_storeProperties', JSON.stringify(props)); 

檢索餅乾和解析保存的數據：

var props = $.parseJSON($.cookie('_storeProperties')); 
// do something with the data.. 

另一個方法（我更喜歡）將使用localStorage。

您可以通過以下鏈接閱讀一些有關的localStorage：

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

請編輯操作請求

這不是一個完整的代碼，只是顯示你如何利用我已根據自己的情況進行了說明，可根據您的需求進行定製：

function adjustments() { 

    // creating an initial properties object 
    var props = { 
     br : $("#br").val(), // brightness 
     ct : $("#ct").val(), // contrast 
     opacity : $("#opacity").val(), //opacity 
     saturate : $("#saturate").val(), //saturate 
    }; 

    // try to fetch stored properties from a cookie 
    var propsCookie = $.cookie('_storeProperties'); 

    // we have previous settings stored 
    if(propsCookie){ 
     // load them 
     props = $.parseJSON(propsCookie); 
    }else{ 
     // no previous settings stored, lets store ours 
     $.cookie('_storeProperties', JSON.stringify(props)); 
    } 

    // use the props object as: props.br , props.ct, etc.. 
    // your code 
} 

希望它有一點幫助！