CODEWITHSUNDEEP
javascripthtmlcookies
Ryan
Ryan

Reputation: 45

How to save page state using cookie(s)?

So I have a night mode feature on my website, below is just a brief example of what the code looks like on my website. I was wondering how would I be able to save the state of the page, so that it stays dark / light after a page refresh. Do I do this with a cookie? I've never implemented cookies into any of my websites before and could really use some help.

Here is the HTML with the buttons on it to activate the script:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>Ryan Simms</title>

</head>

<body>
<script src="scripts/lightSwitch.js"></script> <!-- Loads Script -->

<footer>
    <button type="button" id="lightSwitchOff"></button>
    <button type="button" id="lightSwitchOn"></button>
</footer> <!-- Closes Footer -->

</body>

</html>

Here is the javascript:

document.addEventListener ("DOMContentLoaded", handleDocumentLoad);

function handleDocumentLoad() {

//Variable
var offSwitch = document.getElementById("lightSwitchOff"); //Targets div with ID lightSwitchOff
var onSwitch = document.getElementById("lightSwitchOn"); //Targets div with ID lightSwitchOn
var style = document.getElementById("pageStyle"); //Targets stylsheet
offSwitch.innerHTML = "Turn On Night Mode";
onSwitch.innerHTML = "Turn Off Night Mode";
onSwitch.style.display = "none";

//Event Listener
offSwitch.addEventListener("click", lightsOff); //When clicked this action is performed
onSwitch.addEventListener("click", lightsOn); //When clicked this action is performed

//Function
function lightsOff() { /*This changes the background colour to black and makes text white*/
    style.setAttribute('href', 'css/darkStyle.css');
    onSwitch.innerHTML = "Turn Off Night Mode";
    onSwitch.style.display = "inline";
    offSwitch.style.display = "none";
}

function lightsOn() { /*This changes the background colour to a white and makes text black*/
    style.setAttribute('href', 'css/lightStyle.css');
    offSwitch.innerHTML = "Turn On Night Mode";
    onSwitch.style.display = "none";
    offSwitch.style.display = "inline";
}
}

Upvotes: 0

Views: 3549

Answers (1)

ImprobabilityCast
ImprobabilityCast

Reputation: 464

Set cookies:

document.cookie = "cookieName=cookieValue";

You can also specify the path that the cookie should belong to. The default is the current page. 

documenet.cookie = "cookieName=cookieValue; path=/folder/";

Read cookies:

var cookies = document.cookie;

This will set the value of cookies to a long string arranged like:

"cookie1=value1;cookie2=value2"

Note that you cannot access cookies from other sites, and document.cookie will only return the cookies for the current domain.

https://www.w3schools.com/js/js_cookies.asp has a good cookie tutorial.

Here's an example of how you might do the parsing:

var sugar = document.cookie;
// finds the lights cookie
var start = sugar.indexOf("lights=");
// if there is a light cookie
if (start != -1) {
    // moves the start index to the value of the cookie
    start += "lights=".length;
    // finds the end of the lights cookie value
    var end = sugar.indexOf(";", start);
    var cookieValue;
    // extract the value of the lights cookie
    if (end == -1) {
        cookieValue = sugar.substring(start);
    } else {
        cookieValue = sugar.substring(start, end);
    }

    if (cookieValue == "on") {
        lightsOn();
    } else {
        lightsOff();
    }
}

Upvotes: 1

Related Questions