Adding Cookies to my site.

[jcguigue]

I am trying to build a site that has a checklist. I have it completely set up and functioning, but I can't figure out how to add cookies to it so it saves my progress on the checklist. How can I do this?

https://jcguigue.github.io/HadesCompletion/
https://github.com/jcguigue/HadesCompletion

[nafiulhaqueinan]

create and set cookie->read it->update it
here is a javaScript code for example:

function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days2460601000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// Helper function to get a cookie by name
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let 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;
}

// Save checklist state to a cookie
function saveChecklist() {
const checkboxes = document.querySelectorAll('#checklist input[type="checkbox"]');
const checklistState = Array.from(checkboxes).map(checkbox => checkbox.checked);
setCookie('checklist', JSON.stringify(checklistState), 7);
}

// Load checklist state from a cookie
function loadChecklist() {
const checklistState = getCookie('checklist');
if (checklistState) {
const parsedState = JSON.parse(checklistState);
const checkboxes = document.querySelectorAll('#checklist input[type="checkbox"]');
parsedState.forEach((checked, index) => {
checkboxes[index].checked = checked;
});
}
}

// Event listeners to save the state whenever a checkbox is changed
document.querySelectorAll('#checklist input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', saveChecklist);
});

// Load the checklist state when the page loads
document.addEventListener('DOMContentLoaded', loadChecklist);

[IvanNovikov1226]

I agree with above code!

[ebndev]

Hi @lilly452, thanks for wanting to participate in Discussions!

Please note: we’ve clarified our stance on using generative AI tools like ChatGPT within our Community via this announcement. Please review the guidelines to ensure your post meets them as failure to adhere to those rules can result in action taken by our moderator team.  You can read our updated Code of Conduct and the announcement for more details. Thank you for helping us maintain an authentic and beneficial space for everyone.