Notes

removeFromStorage = (storage, key) => {
storage.removeItem(key);
};

deleteSelected = (storage, listId) => {
if (confirm("Are you sure?") === false) {
return;
}
const list = document.getElementById(listId);
const checkboxes = list.querySelectorAll("input[type='checkbox']:checked");
checkboxes.forEach((checkbox) => {
const key = checkbox.value;
removeFromStorage(storage, key);
});
getLocalStorageItems();
updateDeleteButtonState(listId);
};

handleFromStorage = (event) => {
if (event.target.classList.contains("delete")) {
if (confirm("Are you sure?") === false) {
return;
}
const storage = event.target.classList.contains("localList")
? localStorage
: sessionStorage;
const key = event.target.dataset.local;
removeFromStorage(storage, key);
getLocalStorageItems();
updateDeleteButtonState(storage === localStorage ? "localList" : "sessionList");
} else if (event.target.classList.contains("form-check-input")) {
const listId = event.target.closest("ul").id;
updateSelectAllCheckbox(listId);
updateDeleteButtonState(listId);
}
};

setStorage = (storage, list) => {
for (let i = 0; i < storage.length; i++) {
const li = document.createElement("li");
li.classList.add("list-group-item");

const spanKey = document.createElement("b");
spanKey.innerHTML = storage.key(i);

const spanValue = document.createElement("span");
spanValue.innerHTML = storage.getItem(storage.key(i));

const deleteButton = document.createElement("button");
deleteButton.classList.add(
"btn",
"btn-danger",
"btn-sm",
"float-end",
"delete",
`${list.id}`
);
deleteButton.innerHTML = "Delete";
deleteButton.dataset.local = storage.key(i);

const div = document.createElement("div");
div.classList.add("form-check");

const checkInput = document.createElement("input");
checkInput.classList.add("form-check-input");
checkInput.type = "checkbox";
checkInput.value = storage.key(i);
checkInput.id = `${list.id}Check`;

div.appendChild(checkInput);

li.appendChild(div);
li.appendChild(spanKey);
li.appendChild(document.createTextNode(" : "));
li.appendChild(spanValue);
li.appendChild(document.createTextNode(" "));
li.appendChild(deleteButton);

list.appendChild(li);
}
};

getLocalStorageItems = () => {
const list = document.getElementById("localList");
const sessionList = document.getElementById("sessionList");

document.querySelectorAll("ul").forEach((ul) => {
ul.innerHTML = "";
ul.classList.add("list-group", "list-group-flush");
});

setStorage(localStorage, list);
setStorage(sessionStorage, sessionList);
};

updateSelectAllCheckbox = (listId) => {
const list = document.getElementById(listId);
const checkboxes = list.querySelectorAll("input[type='checkbox']");
const allChecked = Array.from(checkboxes).every((checkbox) => checkbox.checked);
const selectAllCheckbox = document.getElementById(`${listId === "localList" ? "localCheckAll" : "sessionCheckAll"}`);
selectAllCheckbox.checked = allChecked;
};

updateDeleteButtonState = (listId) => {
const list = document.getElementById(listId);
const checkboxes = list.querySelectorAll("input[type='checkbox']:checked");
const deleteButton = document.getElementById(listId === "localList" ? "deleteLocalSelected" : "deleteSessionSelected");
deleteButton.style.display = checkboxes.length > 0 ? 'inline-block' : 'none';
};

document.addEventListener("DOMContentLoaded", function () {
getLocalStorageItems();

const keyInput = document.getElementById("key");
const valueInput = document.getElementById("value");
const saveButton = document.getElementById("btn-save");
const list = document.getElementById("localList");
const sessionList = document.getElementById("sessionList");

const localCheckAll = document.getElementById("localCheckAll");
const sessionCheckAll = document.getElementById("sessionCheckAll");

const deleteLocalSelected = document.getElementById("deleteLocalSelected");
const deleteSessionSelected = document.getElementById("deleteSessionSelected");

list.addEventListener("click", handleFromStorage);
sessionList.addEventListener("click", handleFromStorage);

saveButton.addEventListener("click", function () {
const value = valueInput.value;
const key = keyInput.value;

localStorage.setItem(key, value);
sessionStorage.setItem(key, value);

getLocalStorageItems();
document.querySelectorAll("input").forEach((input) => (input.value = ""));
updateDeleteButtonState("localList");
updateDeleteButtonState("sessionList");
});

localCheckAll.addEventListener("change", function () {
const checkboxes = list.querySelectorAll("input[type='checkbox']");
checkboxes.forEach((checkbox) => {
checkbox.checked = localCheckAll.checked;
});
updateDeleteButtonState("localList");
});

sessionCheckAll.addEventListener("change", function () {
const checkboxes = sessionList.querySelectorAll("input[type='checkbox']");
checkboxes.forEach((checkbox) => {
checkbox.checked = sessionCheckAll.checked;
});
updateDeleteButtonState("sessionList");
});

deleteLocalSelected.addEventListener("click", function () {
deleteSelected(localStorage, "localList");
});

deleteSessionSelected.addEventListener("click", function () {
deleteSelected(sessionStorage, "sessionList");
});

updateDeleteButtonState("localList");
updateDeleteButtonState("sessionList");
});