Web storage의 개념 : 키/값 쌍으로 데이터를 저장하고 키를 기반하고 데이터를 조회하는 패턴. Local storage(영구저장소)와 Session storage(임시저장소)를 따로 두어 데이터의 지속성을 구분.
cookie : 하이퍼텍스트의 기록서 (HTTP)의 일종으로 사용자가 어떤 웹사이트를 방문할 경우 그 사이트가 사용하는 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록정보파일을 일컫는다. 사용자가 웹사이트를 방문할때 마다 읽히고 수시로 새로운 정보로 바뀐다.
cookie와 web storage 의 차이
: 쿠키는 매번 서버로 전송된다.(웹사이트에 쿠키를 설정하면 모든 웹요청은 쿠키정보를 포함해서 서버로 전송되는데 web storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지 않는다)
: 단순 문자열을 넘어 객체정보 저장 x
: 용량의 제한이 없다 (쿠키의 개수와 용량에는 제한이 있다. 하나의 사이트에 저장할 수 있는 최대 쿠키 크기는 4kb로 제한)
: 영구 데이터 저장이 가능 (쿠키는 만료일자를 지정하게 되어있어 언젠가 제거된다. web storage는 만료기간의 설정이 없어서 영구적으로 존재가능)
local storage : 저장된 데이터를 명시적으로 지우지 않는 이상 영구적 보관가능. 도메인마다 별도로 생성됨.
session storage : 하나의 세션이 지나면 저장된 데이터는 사라지는 제한성이 존재. 새로고침하면 사라지는.
쿠키에서 데이터를 가져올때 str형태로만 가져올수 있다.
local storage의 저장은 key와 value(값)의 형태로 이루어진다. 할당된 키에 저장되는 값은 숫자, 문자열 또는 객체(json형태)나 배열형태로 저장할 수 있다.
지속적으로 필요한 데이터(자동 로그인 등)는 local에 잠깐 필요한 정보(일회성 로그인 정보 등)는 session 에 저장. 비밀번호같이 중요한 정보는 클라이언트에 저장되기 때문에 저장안하는 걸 추천.
localStorage.setItem(키, 값) 저장
localStorage.getItem(키, 값) 조회
localStorage.removeItem(키) 해당 키 지워짐
localStorage.clear() 스토리지 전체가 비워짐
