캠프 6주 1일차 TIL

오늘

오늘은 팀프로젝트 발표날이었고 추가적인 공부와 오류보다는 기본적인 문제를 해결하는 시간을 가졌다.

우선 저번에 작성한 js를 추가적으로 수정해 줬는데 

 

link_a.forEach(function (t, i) {
    t.addEventListener('click', function (e) {
        close = true;

        for (const n of link_a) {
            n.classList.remove('active1');
        }

        if (close == true) {
            link_a[i].classList.add('active1');
            close = false;
        } else {
            close = true;
        }
    });
});

기존 코드에서 추가적으로 localStorage.setItem을추가해 줬다.

if (close == true) {
    link_a[i].classList.add('active1');
    close = false;
    localStorage.setItem('activeLink', t.href);
} else {
    close = true;
}

    localStorage.setItem('activeLink', t.href);

웹 스토리지(web storage)에는 2가지의 스토리지가 있다. 그중 하나는 로컬 스토리지(localStorage)그리고 다른 하나는 세션 스토리지(sessionStorage)이다.

두 스토리지의 차이로는 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지고 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터는 지워지지 않는다. 즉 웹페이지를 여러 개 띄운다 = 세션을 여러 개 띄운다. 웹페이지를 닫으면 세션스토리지의 데이터는 삭제된다. 그럼 로컬스토리지는 웹페이지를 닫아도 데이터가 남아 있다. 즉 웹페이지를 닫아도 다시 열면 그 데이터가 그대로 남아 있다는 것. 대신 다른 브라우저(chrom, firefox, edge)를 사용하면 로컬스토리지데이터는 존재하지 않는다. 그래서 내가 해결하고픈 건... 이게 아닌데.... 이번주내로해결해서 다시 작성해야겠다. 해결하고돌아왔다~!~!~!~!

우선 링크에서 모든 class를 remove 해주기 위해 진짜 헬 코드를 작성했다.

home_a.addEventListener('click', function () {
    link_a[0].classList.add('active1');
    link_a[1].classList.remove('active1');
    link_a[2].classList.remove('active1');
    link_a[3].classList.remove('active1');
    link_a[4].classList.remove('active1');
});

우리에겐 좋은 for문이 잇지 않나....? 근데 나는 왜 for문을 사용하지 못하는 건가...

home_a.addEventListener('click', function () {
    link_a[0].classList.add('active1');
    for (let i = 1; i <= 4; i++) {
        link_a[i].classList.remove('active1');
    }
    localStorage.setItem('activeLink', link_a[0].href);
});

깔끔하게 정리해서 로고를 클릭했을 경우에 nav에 들어간 모든 class는 제거된다. 근데 class를 지운 다고 한들 스토리지에 저장된 정보는 남아있더라... ㅠㅠㅠ 결국 스토리지정보를 지우지 못하면... 아무 의미가 없기에 스토리지저장 말고 제거를 찾아봤다.

localStorage.removeItem('activeLink');

class가 추가될 때 제거도 같이 이루어지게 해 줘서 완료.

if (localStorage.getItem('activeLink')) {
    const activeLink = localStorage.getItem('activeLink');

    link_a.forEach((link) => {
        if (link.href === activeLink) {
            link.classList.add('active1');
            localStorage.removeItem('activeLink');
        }
    });
}

오류해결! 뿌듯한 규파팡

오늘의 규파팡이 느낀 점!

하나씩 알아가는 건 즐거운 일이고 내가 요즘 초심을 많이 잃었다는 것을 느낄 수 있었다.

TIL 대표이미지