2024. 08. 02(팀 프로젝트-2)

이전에 이어서 굳이 캔버스를 사용하지 않아도 되는 방법을 찾았는데

<div id="circle1"></div>

로 영역을 만든다음

<style>

#circle1 {

position: absolute;

border-radius: 100%;

opacity: 0.2;

bottom: 10vh;

left: 10vw;

width: 200px;

height: 200px;

background-color: #6bc7f0;

}

스타일을 이용하여 원을 그리는 방법이다.

주변 둥글기인 border-radius값을 높이면 결국 원이 된다.

 

이제 기본인 원과 숫자를 나타내는 버튼을 만들었으니, 그 숫자를 저장해야한다.

처음에는 필수과제에 처음보는 localstorage에 저장을 하자 하였는데,

localstorage를 이용하면 웹 브라우저에서 로컬 데이터를 저장하고, 불러와 사용할 수 있다.

 

(1) 데이터 저장하기(setItem)

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

-> 이를 실행하려면 객체가 필요하기 때문에 먼저 객체를 생성하고 난 후에 작성한다.

 

(2) 데이터 불러오기(getItem)

localStorage.getItem('key');

key를 적으면 그 키에 해당하는 값을 얻을 수 있다.

 

(3) 데이터 삭제하기(removeItem)

localStorage.removeItem('key');

위와 같이 removeItem 메소드를 사용하면 key 값에 해당하는 데이터를 삭제할 수 있다.

 

위 내용들을 사용하여 로컬스토리지에 클릭한 횟수 : 숫자; 를 저장하려하였다.

let cnt1 = 0;
const button = document.getElementById("buttonHappy");
const span = document.querySelector("span");

function clickCounter() {
    cnt1 += 1;
    span.innerText = `happyClick: ${cnt1}`;
    console.log(cnt1);
    
    // cnt1 값을 JSON 문자열로 변환하여 localStorage에 저장
    let cntString = JSON.stringify(cnt1);
    window.localStorage.setItem("happyClick", cntString);
}

// 버튼 클릭 이벤트에 clickCounter 함수 연결
button.addEventListener("click", clickCounter);

// 페이지 로드 시 localStorage에서 값을 가져와서 cnt1 초기화
document.addEventListener("DOMContentLoaded", (event) => {
    let storedCnt = window.localStorage.getItem("happyClick");
    if (storedCnt !== null) {
        cnt1 = JSON.parse(storedCnt);
        span.innerText = `happyClick: ${cnt1}`;
    }
});

-> 우선 key=value 값으로 string만 받기 때문에 JSON을 사용하여 문자열로 변환하였고, 페이지를 새로고침하였을 때 내가 저장했던 값에서 다시 더하기 위해서 저장했던 값을 불러오는 함수를 사용하였다.