(1)~ (6) Web data storage - 쿠키, 웹 스토리지 정리

보호되어 있는 글입니다.

• format_list_bulleted JS
• · 2025. 2. 11.

(6) Web data storage - 테마 저장, 장바구니 구현하기

테마 저장 구현하기사용자가 선택한 색상을 저장하고 다시 불러올 수 있도록 해야하고사용자는 배경색과 테두리 색상을 변경할 수 있으며,변경된 색상은 로컬 스토리지 (localStorage) 에 저장되어야한다. ▶ html, css 파일더보기 테마 설정 채우기 테두리 @font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; fon..

• format_list_bulleted JS
• · 2025. 2. 10.
• textsms

(5) Web data storage - 웹 스토리지 다루기

자바스크립트 코드를 사용해 웹 스토리지를 다루는 방법을 알아보자. 로컬 스토리지와 세션 스토리지는 모두 Web Storage API를 따르며, 동일한 방식으로 사용할 수 있다. 이 API는 Storage 객체의 메서드인 getItem(), setItem(), removeItem() 등을 제공해 데이터를 쉽게 관리할 수 있다.  로컬 스토리지▶ HTML 파일 예시로컬 스토리지를 테스트하기 위해 다음과 같은 HTML 파일을 사용한다. 웹 스토리지 테스트 초반에 localStorage를 확인해보면 데이터가 저장되어있지 않는 것을 확인할 수 있다. ▶ 데이터 추가하기localStorage.setItem(이름, 값)을 통해 데이터를 추가할 수 있다.localStorage.setItem('language', 'k..

• format_list_bulleted JS
• · 2025. 2. 7.
• textsms

(4) Web data storage - 웹 스토리지

쿠키에 이어 또 다른 웹 브라우저의 저장소인 웹 스토리지는쿠키의 단점을 보완하기 위해 쿠키 이후에 새롭게 나온 저장소이며로컬 스토리지와 세션 스토리지 두 가지 종류가 있다.이 두 가지 역시 쿠키와 같이 '이름(Key)과 값(Value)의 쌍'의 형태로 데이터를 저장한다.로컬 스토리지: 사용자가 브라우저를 닫더라도 저장된 데이터가 유지된다.예를 들어 인터넷 댓글 창이나 메신저 창에서 작성 중이던 메시지가 전송되지 않은 상태로 페이지를 닫더라도, 다시 해당 페이지를 열었을 때 메시지가 그대로 남아있는 경우가 많으며 이는 로컬 스토리지를 활용한 사례이다.세션 스토리지: 브라우저 탭을 닫을 때 데이터가 삭제되고 임시 데이터 저장에 적합하다.로컬 스토리지와 셔선 스토리지의 자세한 내용은 잠시 후에.. ▶ 디스코드..

• format_list_bulleted JS
• · 2025. 2. 7.
• textsms

(3) Web data storage - 쿠키 (Cookie) 다루는 함수 만들기

지금까지는 개발자 도구의 콘솔 창에서 쿠키를 확인하거나 변경하는 작업을 해 보았는데 특정 쿠키가 있는지 확인하거나,내가 원하는 쿠키의 값을 가져오거나,쿠키를 추가/삭제하는 작업 등을 하는 함수를 만들어 두면필요할 때 편리하게 가져다 쓸 수 있다.쿠키가 있는지 확인하는 함수먼저 특정 쿠키가 있는지 확인하는 코드를 작성한다.function isCookieExist(name) { const encodedName = encodeURIComponent(name); return document.cookie .split('; ') .find((cookie) => cookie.startsWith(encodedName)) ? true : false;}코드를 하나씩 살펴보면먼저 document..

• format_list_bulleted JS
• · 2025. 2. 6.
• textsms

(2) Web data storage - 쿠키 (Cookie) 추가/수정/삭제

자바스크립트로 쿠키 추가하기쿠키를 추가하는 방법은 매우 간단하다다음과 같이 document.cookie에 새로 추가하고 싶은 쿠키의 값을 넣어주면 된다.document.cookie = 'language=korean'; 여기서 봐야할 것은 document.cookie 자체를 덮어 쓰는 것이 아니라새로운 쿠키를 추가만 한다는 점이다.보기엔 document.cookie 라는 변수에 새로운 값을 할당하는 것처럼 보이지만사실 내부적으로는 조금 다르게 동작한다.자바스크립트로 쿠키 수정하기만약 현재 있는 쿠키의 값을 변경하고 싶으면변경하고 싶은 쿠키의 이름에 새로운 값을 넣은 문자열을document.cookie에 넣어 주면 된다. 방금 language라는 쿠키의 값을 korean으로 넣었는데 english로 바꾸고 ..

• format_list_bulleted JS
• · 2025. 2. 6.
• textsms