⬜로컬 스토리지 , 세선 스토리지, 쿠키
로컬 스토리지와 세선 스토리지는 HTML5dp 추가된 저장소로 간단한 key와 value를 저장할 수 있다.
로컬 스토리지는 사용자가 삭제하지 않는 이상 브라우저에 남아있다.
세션 스토리지는 윈도우나 창을 닫으면 삭제된다.
로컬 스토리지와 세션 스토리지 이전에 브라우저에 저장소 역할을 한것이 쿠키
쿠키란 만료기한이 있는 key-value 저장소이다.
⬜저장방법
key와 value 순서대로 저장한다.
key와 value의 타입은 string으로 변환돼서 저장된다.
ex)
localStorage.setItem('key_name','value') // => 저장
localStorage.getItem('key_name') // => 조회 ='value'
localStorage.removeItem('key_name') // => 해당 key,value 삭제
localStorage.clear() // => 로컬 스토리지 전체 삭제JSON.stringify => JavaScript 값이나 객체를 JSON 문자열로 변환
JSON.parse => 결과를 반환하기 전에 타입 변환
서버에 불필요한 데이터를 활용할 수 있다.
용량이 크다(5mb, 브라우저마다 상이)
HTML5 지원하지 않는 브라우저에서는 사용불가
⬜쿠키
쿠키는 서버가 사용자의 웹 브라우저에 저장하며 4KB이상 저장이 불가
브라우저마다 저장되는 쿠키가 다르다.
쿠키 종류
-
필수적인 쿠키: 웹사이트의 기본적인 기능의 활성화를 목적으로 사용, 필수적인 쿠키 없이 최적화된 기능 수행이 불가하므로 본 쿠키는 이용자의 별도 동의 없이 활성화.
-
기능 쿠키: 접속자의 지역 및 언어 등 접속자 설정을 저장하도록 허용하며, 접속자 설정에 따라 웹사이트가 작동하도록 도움을 줍니다.
-
성능 쿠키: 정보의 익명 수집 및 보고를 통해 유저와의 상호관계에 대한 통계자료를 제공함으로써 웹사이트 운영자가 더욱 최적화된 웹사이트를 개발하는데 기여.
-
마케팅 쿠키: 유저의 방문 내역을 추적, 쿠키 제공자가 접속자의 경향 및 웹사이트 이용 패턴을 파악하도록 함으로써 유저에게 관련성 높은 광고나 제품이 제공되는데에 기여합니다.
사용 방법
- client가 server에 요청을 하면 서버는 응답할 때 쿠키에 저장할 정보를 Header의 Set-Cookie로 전달.
Set-Cookie: <cookie-name> = <cookie-value>
Set-Cookie: expires = Sat, 26-Dec-2020 04:39:21 GMT- client는 server로 전송하는 요청에 현재 브라우저에 저장된 쿠키를 Header의 Cookie로 전달
set-cookie: <cookie-name> = <cookie-value>
set-cookie: expires = Sat, 26-Dec-2020 04:39:21 GMT서버가 쿠키와 함께 클라이언트에게 응답을 전달하면,
이후, 해당 client는 매번 저장된 쿠키를 Header에 포함해서 요청을 보낸다.
⬜사용예시
-
자동 로그인 -> 로컬스토리지
-
입력 폼 정보 -> 세션스토리지
-
비로그인 장바구니 -> 세션스토리지
-
다시 보지 않음 팝업 창 -> 쿠키
🗨 출처
https://kobrekim.com/footer-ko-kr/cookie-policy-ko-kr/what-are-cookies-and-why-we-use-them-ko-kr/
https://lovefor-you.tistory.com/247
