How to display the value of a cookie in a .html file

I have this jquery: (jquery.cookie.js) And this is my cookie:

$(document).ready(function(){ //hide all divs just for the purpose of this example, //you should have the divs hidden with your css //$('.picture.1').hide(); //check if the cookie is already setted if ($.cookie("currentDiv")===undefined){ $.cookie("currentDiv",1); } else{ //else..well //get and increment value, let's suppose we have just 8 divs var numValue = parseInt($.cookie("currentDiv")); numValue = numValue + 1; if (numValue>8){ //restart to 1 $.cookie("currentDiv",1); } else{ //no issues, assign the incremented value $.cookie("currentDiv",numValue.toString()); } //show the div $('.picture.'+$.cookie("currentDiv")).show(0); }
});

The cookie called currentDiv has a number from 1 to 8 and changes every reload and reset when the value is higher as 8

How can I display the cookie (called currentDiv) with his current value? Like:

The installed cookies are: currentDiv with the value (for example 5)

2 Answers

you can do this to list all the pages cookies:

<span><span>
<script>
document.getElementById('myId').innerHTML=listCookies()
function listCookies() { var theCookies = document.cookie.split(';'); var aString = ''; for (var i = 1 ; i <= theCookies.length; i++) { aString += i + ' ' + theCookies[i-1] + "\n";
} return aString;
}
</script>

jsfiddle:

Unless I am misunderstanding, create an element for the cookie value display, say its ID is "display-value". Within the $(document).ready(function() { ... }), add $("#display-value").text("The installed cookies are: currentDiv " + ($.cookie("currentDiv") || 0)); to the end (or to the beginning, depends on when you want to show it).