Utiliser le cookie jquery pour conserver la hauteur CSS

Question

J'ai un bouton qui définit une hauteur CSS dont j'ai besoin de garder la même chose même après l'actualisation de la page. Voici le code:

<script> 
    function changeHeight(){ 
     $('#totalInfo').css('marginTop', '172px'); 
     $('.single #secondary-two #cart').css('maxHeight', '290px'); 
    } 
</script> 

<button onClick="changeHeight()">Change Height</button> 

Le problème est, je ne l'ai jamais traité avec les cookies avant et ne savent pas comment mettre un, puis le lire quand une page est chargée. Quelqu'un peut-il m'aider sur l'utilisation des cookies jquery pour s'assurer que la hauteur CSS reste la même après les rafraîchissements?

Merci

Answer 1

utilisation du plugin jQuery.cookie. Une fois que vous l'inclure, vous devez l'appeler ainsi:

if (!$.cookie("height")) 
    $.cookie("height", "297px"); 

Et quand vous donnez une fonction changeHeight(), ajoutez cela aussi:

function changeHeight(){ 
    $('#totalInfo').css('marginTop', '172px'); 
    $('.single #secondary-two #cart').css('maxHeight', '290px'); 
    $.cookie("height", "297px"); 
} 

Answer 2

Si vous utilisez JavaScript standard, l'article suivant devrait aider: http://www.w3schools.com/js/js_cookies.asp

Si vous utilisez jQuery, il est encore plus facile, en utilisant ce plugin: http://www.electrictoolbox.com/jquery-cookies/

Answer 3

Pour créer une utilisation des cookies:

$.cookie('height', heightValue); 

Pour le lire, utilisez:

var height = $.cookie('height'); 

et de le supprimer, utilisez:

$.cookie('height', null); 

Answer 4

Vous pouvez utiliser le jquery_cookie()

$("#myid").on("click") { 
function changeHeight(){ 
     $('#totalInfo').css('marginTop', '172px'); 
     $('.single #secondary-two #cart').css('maxHeight', '290px'); 
    $.cookie('the_cookie', 'the_value', { expires: 7 }); 
}); 

<button id="myid">Change height</button> 

the_value signifie dans ce cas:

vous définissez le cookie comme celui-ci:

$.cookie("foo", "somevalue"); 

Maintenant, vous appelez le cookie comme ceci:

alert($.cookie("foo")); 

la sortie sera:

certaine valeur