브라우저 저장소 (cookie, webStorage)

woolee의 기록보관소·2022년 11월 9일

목록 보기

7/35

때때로 웹사이트 내 다른 페이지에서 사용할 수 있도록 client side에 정보를 저장해야 하는 경우가 있다.

javascript를 사용해서 client side에 정보를 저장하는 방법으로 2가지를 떠올릴 수 있다. 즉, "Cookie"와 "webStorage(localStorage, sessionStorage)"를 사용해서 client side에 정보를 저장할 수 있다.

cookie

cookie는 작은 텍스트 파일(4KB)에 저장되는 데이터(key-value 형태로 클라이언트 로컬에 저장됨)이다. 클라이언트 측에 정보를 저장되는 데 사용된다. 사용자 이름, 프로필 링크, 연락처 번호 등 원하는 정보를 저장할 수 있다. 쿠키로 저장하면 동일한 정보를 서버에 반복해서 요청할 필요가 없다.

Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다. 쿠키는 사용자가 따로 설정하지 않아도 브라우저 요청 시 Response Header에 자동으로 쿠키를 넣어서 서버에 전송한다. 매번 전송하는 이유는 HTTP의 stateless, connectionless(클라이언트와 통신이 끝나면 상태 정보를 저장하지 않는 무상태성과 비연결성) 때문이다. 즉, 정보 저장과 사용자 식별을 위해서.

+-- 세션 쿠키 (session cookies)
쿠키에 만료일이 포함되지 않으면 세션 쿠키로 간주된다. 저장되지 않고 브라우저나 탭이 닫히면 영구적으로 삭제된다.

+-- 지속적 쿠키 (persistent cookies)
만료일이 포함될 경우 지속적 쿠키로 간주된다. 만료 기한까지 데이터 저장된다.

//Setting cookie named fullname
document.cookie = "fullname=Raj Chen";

//We can set expiry time(UTC) also
document.cookie = "fullname=Raj Chen; expires=Mon, 14 May 2018 12:30:00 UTC";

/*By default cookie belongs to the current page. You can set path for cookie*/
document.cookie = "fullname=Raj Chen; expires=Mon, 14 May 2018 12:30:00 UTC; path=/;";

//Reading cookie(GETTING COOKIE)
var myCookie = document.cookie; 

//Deleting cookie(set expires to the passed date time)
//You don't need to provide cookie value but path is necessary to delete specific cookie
document.cookie = "fullname=; expires=Mon, 26 Aug 2017 12:00:00 UTC; path=/;";

webStorage

쿠키의 용량, 속도 및 보안 문제를 해결하기 위해 HTML5부터 추가된 기능으로, 웹사이트의 데이터를 클라이언트 측에 저장할 수 있는 새로운 자료구조.

localStorage

localStorage를 사용하면 웹 어플리케이션이 유저의 브라우저 내에 데이터를 저장하도록 한다. localStorage는 데이터 저장, 검색 작업 뿐만 아니라 쿠키보다 더 많은 저장 용량을 가진다. 만료 날짜와 시간 없이 데이터를 저장할 수 있다. 브라우저를 닫아도 데이터가 삭제되지 않는다.

/* Checking whether browser supports localStorage or not */

if(localStorage)
{
   alert("Your browser supports localStorage");
} else {
   alert("Your browser does not support localStorage");
}


/* Storing data using setItem() method */
localStorage.setItem("name", "Hemkesh Agrawani")
localStorage.setItem("age", 23)

/* Storing data using array assignment syntax*/
localStorage["username"] = "Hemkesh67"

/* Getting data value */
var myName = localStorage.getItem("name") //Hemkesh Agrawani

/* Removing/Deleting data value */
localStorage.removeItem("name")

/* Delete all data from localStorage */
localStorage.clear()

sessionStorage

sessionStorage가 저장하는 데이터가 특정 세션에 대한 것이라는 점을 제외하고는 localStorage와 동일하다. 브라우저가 닫히면 데이터가 삭제/손실된다.

sessionStorage는 transactional and less secure websites에 유용하다.

/* Checking whether browser supports sessionStorage or not */

if(sessionStorage)
{
   alert("Your browser supports sessionStorage");
} else {
   alert("Your browser does not support sessionStorage");
}


/* Storing data using setItem() method */
sessionStorage.setItem("name", "Hemkesh Agrawani")
sessionStorage.setItem("age", 23)

/* Storing data using array assignment syntax*/
sessionStorage["username"] = "Hemkesh67"

/* Getting data value */
var myName = sessionStorage.getItem("name") //Hemkesh Agrawani

/* Removing/Deleting data value */
sessionStorage.removeItem("name")
/* Delete all data from sessionStorage */
sessionStorage.clear()

cookie와 webStorage의 차이점

1. 서버 전송 여부

웹사이트에서 쿠키를 설정하면 모든 요청은 쿠키 정보를 포함해 서버로 전송하므로 불필요한 트래픽 발생시킨다. 반면 웹스토리지는 데이터가 클라이언트 측에만 저장되어 있을 뿐 서버로 전송은 하지 않는다.

2. 저장

웹스토리지는 단순 문자열 말고도 객체 정보를 저장할 수 있다.
=> (array/object를 강제로 문자열로 바꿔서 저장한다. 이때 깨질 수 있으므로 JSON.stringify() 안에 array/object를 집어 넣으면 문자열 취급을 받아서 깨지지 않는다. 넣은 데이터를 다시 꺼내고 싶으면 JSON.parse() 안에 넣어서 꺼내면 된다. )

쿠키는 만료일자를 설정하지 않으면 지속적쿠키(persistent cookies)로 간주된다. 세션쿠키(session cookies)는 메모리에 저장되어 브라우저나 탭이 닫히면 삭제되지만 지속적쿠키는 삭제하지 않는 한 만료기한까지 데이터가 계속 저장된다. 반면 웹스토리지는 만료기간 설정이 없다.