Managing cookies using JavaScript functions

Question

Managing cookies using JavaScript functions

Is there a way to set a cookie based on the CSS file selected in my HTML? I have a form with a list of options, each representing a different CSS file. I want to save the selected file to a cookie that lasts for a week, so the next time the HTML file is opened, it will remember the previous selection.

Check out the JavaScript code below:

function cssLayout() {
    document.getElementById("css").href = this.value;
}

function setCookie(){
    var date = new Date("February 10, 2013");
    var dateString = date.toGMTString();
    var cookieString = "Css=document.getElementById("css").href" + dateString;
    document.cookie = cookieString;
}

function getCookie(){
    alert(document.cookie);
}

Here's the HTML code snippet:

<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>

javascript html css cookies

Answer 1

Answer №1

This code simplifies the process of setting, getting, and erasing cookies in JavaScript:

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

Usage example:

setCookie('ppkcookie', 'testcookie', 7);

var x = getCookie('ppkcookie');
if (x) {
    // Do something with x
}

Source - http://www.quirksmode.org/js/cookies.html

This page was updated today, so the information provided is current.

Answer 2

This code simplifies the process of setting, getting, and erasing cookies in JavaScript:

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

Usage example:

setCookie('ppkcookie', 'testcookie', 7);

var x = getCookie('ppkcookie');
if (x) {
    // Do something with x
}

Source - http://www.quirksmode.org/js/cookies.html

This page was updated today, so the information provided is current.

Answer 3

Answer №2

Forget about w3schools, these superior references are a game-changer:

Take a look at some code snippets inspired by these references:

// sets the cookie cookie1
document.cookie = 'cookie1=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'

// sets the cookie cookie2 (without overwriting cookie1)
document.cookie = 'cookie2=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'

// remove cookie2
document.cookie = 'cookie2=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'

And if that's not enough, the Mozilla reference even offers a convenient cookie library for your use.

Answer 4

Forget about w3schools, these superior references are a game-changer:

Take a look at some code snippets inspired by these references:

// sets the cookie cookie1
document.cookie = 'cookie1=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'

// sets the cookie cookie2 (without overwriting cookie1)
document.cookie = 'cookie2=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'

// remove cookie2
document.cookie = 'cookie2=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'

And if that's not enough, the Mozilla reference even offers a convenient cookie library for your use.

Answer 5

Answer №3

For information about working with JavaScript Cookies, visit W3Schools.com. Here, you can learn how to set and retrieve cookie values using JavaScript.

The setCookie and getCookie methods outlined on the website can be used for this purpose.

Here's an example of how the code may appear:

<script>
function setCookie(cookieName, value, expirationDays) {
    var expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + expirationDays);
    var cookieValue = escape(value) + ((expirationDays == null) ? "" : "; expires=" + expirationDate.toUTCString());
    document.cookie = cookieName + "=" + cookieValue;
}

function getCookie(cookieName) {
    var i, x, y, cookiesArray = document.cookie.split(";");
    for (i = 0; i < cookiesArray.length; i++) {
        x = cookiesArray[i].substr(0, cookiesArray[i].indexOf("="));
        y = cookiesArray[i].substr(cookiesArray[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == cookieName) {
            return unescape(y);
        }
    }
}

function cssSelected() {
    var selectedCSS = $('#myList')[0].value;
    if (selectedCSS !== "select") {
        setCookie("selectedCSS", selectedCSS, 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>

Answer 6

For information about working with JavaScript Cookies, visit W3Schools.com. Here, you can learn how to set and retrieve cookie values using JavaScript.

The setCookie and getCookie methods outlined on the website can be used for this purpose.

Here's an example of how the code may appear:

<script>
function setCookie(cookieName, value, expirationDays) {
    var expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate() + expirationDays);
    var cookieValue = escape(value) + ((expirationDays == null) ? "" : "; expires=" + expirationDate.toUTCString());
    document.cookie = cookieName + "=" + cookieValue;
}

function getCookie(cookieName) {
    var i, x, y, cookiesArray = document.cookie.split(";");
    for (i = 0; i < cookiesArray.length; i++) {
        x = cookiesArray[i].substr(0, cookiesArray[i].indexOf("="));
        y = cookiesArray[i].substr(cookiesArray[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == cookieName) {
            return unescape(y);
        }
    }
}

function cssSelected() {
    var selectedCSS = $('#myList')[0].value;
    if (selectedCSS !== "select") {
        setCookie("selectedCSS", selectedCSS, 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>

Answer 7

Answer №4

This question seems like it requires a broad answer that includes reusable code for handling cookies as key-value pairs.

The code snippet below, sourced from MDN, provides a reliable and UTF-safe way to interact with cookies:

var docCookies = {
  // Functions for handling cookies
};

It's worth noting that Mozilla has conducted tests to validate the functionality of this code across different scenarios.

For an alternative approach, you can also check out another snippet available here.

Answer 8

This question seems like it requires a broad answer that includes reusable code for handling cookies as key-value pairs.

The code snippet below, sourced from MDN, provides a reliable and UTF-safe way to interact with cookies:

var docCookies = {
  // Functions for handling cookies
};

It's worth noting that Mozilla has conducted tests to validate the functionality of this code across different scenarios.

For an alternative approach, you can also check out another snippet available here.

Managing cookies using JavaScript functions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Customize Your Google Maps with Checkboxes for Style Options

Consolidate radio group in Vuetify platform

Effortlessly submit multiple forms at once with just a single click using the WordPress form

Issues with PHP code not displaying properly in HTML email design

The React.js navigation bar hamburger menu refuses to close when toggled

Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

Trouble with CSS styling arising when launching the MVC application on IIS

Having trouble with Vue.js image force download not functioning properly with anchor tags?

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Developing a Rails application integrated with Pusher or Faye for real

Converting input dates in nest.js using TypeScript formatting

Incorporate a background image with the JavaScript CSS property

Issues with redirection to registration page in PHP Slim framework

The bond between Node.js and Express

Morris Chart Bar Graph now comes with a sleek horizontal scroll bar feature,

What is the purpose of adding "/dist" to the library import statement?

Removing the active class from a Bootstrap menu can be achieved by targeting the specific

Error message: Icons failing to display in conjunction with template output | 404 error code

Selenium with Javascript

Access the child element of a span by targeting a specific attribute value using Protractor