Προσπαθώ να ορίσω ένα cookie ανάλογα με το ποιο αρχείο CSS επιλέγω στην HTML μου. Έχω μια φόρμα με μια λίστα επιλογών και διαφορετικά αρχεία CSS ως τιμές. Όταν επιλέγω ένα αρχείο, θα πρέπει να αποθηκεύεται σε ένα cookie για περίπου μια εβδομάδα. Την επόμενη φορά που θα ανοίξετε το αρχείο HTML, θα πρέπει να είναι το προηγούμενο αρχείο που επιλέξατε.
Κώδικας JavaScript:
function cssLayout() {
document.getElementById("css").href = this.value;
}
function setCookie(){
var date = new Date("Februari 10, 2013");
var dateString = date.toGMTString();
var cookieString = "Css=document.getElementById("css").href" + dateString;
document.cookie = cookieString;
}
function getCookie(){
alert(document.cookie);
}
Κωδικός HTML:
<form>
Select your css layout:<br>
<select id="myList">
<option value="style-1.css">CSS1</option>
<option value="style-2.css">CSS2</option>
<option value="style-3.css">CSS3</option>
<option value="style-4.css">CSS4</option>
</select>
</form>
Αυτές είναι πολύ πολύ καλύτερες αναφορές από το w3schools (η πιο απαίσια αναφορά στο διαδίκτυο που έγινε ποτέ):
Παραδείγματα που προέρχονται από αυτές τις αναφορές:
// sets the cookie cookie1
document.cookie =
'cookie1=test; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/'
// sets the cookie cookie2 (cookie1 is *not* overwritten)
document.cookie =
'cookie2=test; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/'
// remove cookie2
document.cookie = 'cookie2=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'
Η αναφορά Mozilla έχει ακόμη και μια ωραία βιβλιοθήκη cookie που μπορείτε να χρησιμοποιήσετε.
Είμαι σίγουρος ότι αυτή η ερώτηση θα πρέπει να έχει μια πιο γενική απάντηση με κάποιο επαναχρησιμοποιήσιμο κώδικα που λειτουργεί με cookies ως ζεύγη κλειδιών-τιμών.
Αυτό το απόσπασμα προέρχεται από το MDN και πιθανώς είναι αξιόπιστο. Πρόκειται για αντικείμενο ασφαλές ως προς UTF για εργασία με cookies:
var docCookies = {
getItem: function (sKey) {
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!sKey || !this.hasItem(sKey)) { return false; }
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: /* optional method: you can safely remove it! */ function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
return aKeys;
}
};
Η Mozilla έχει κάποιες δοκιμές που αποδεικνύουν ότι αυτό λειτουργεί σε όλες τις περιπτώσεις.
Υπάρχει ένα εναλλακτικό απόσπασμα εδώ:
Ελέγξτε το JavaScript Cookies στο W3Schools.com για τον καθορισμό και τη λήψη τιμών cookie μέσω JS.
Απλά χρησιμοποιήστε τις μεθόδους setCookie και getCookie που αναφέρονται εκεί.
Έτσι, ο κώδικας θα μοιάζει κάπως έτσι:
<script>
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function cssSelected() {
var cssSelected = $('#myList')[0].value;
if (cssSelected !== "select") {
setCookie("selectedCSS", cssSelected, 3);
}
}
$(document).ready(function() {
$('#myList')[0].value = getCookie("selectedCSS");
})
</script>
<select id="myList" onchange="cssSelected();">
<option value="select">--Select--</option>
<option value="style-1.css">CSS1</option>
<option value="style-2.css">CSS2</option>
<option value="style-3.css">CSS3</option>
<option value="style-4.css">CSS4</option>
</select>