Web Storage

프로젝트를 하면서 많이 사용해봤을 web Storage에 대해서 한번 얘기해보자.
예를 들자면,보통 로그인을 하였을때 서버로 부터 token을 받게 되는데 이것을 context API,Redux,Recoil 등 전역상태관리를 사용하는 라이브러리를 사용하지 않을때, 임시적으로 브라우저에다가 값을 저장하고 필요할때 가져와서 쓰는 방법이 있다.
세가지 종류가 있는데 localStorage, Session, Cookie 이다. 오늘은 이 세가지 WebStorage에 대해서 톺아보자~!

1.Local Storage

• Session Storage 와 Local Storage의 가장 큰 차이점은 탭 안에서의 유효성이다.
• local storage는 탭을 닫아도 값들이 유효하다.
• 저장한도 5MB 이며 서버로 전송되지 않음.
• key,value 형식으로 보관한다.

2.Session Storage

• 탭이 닫힐때 까지가 데이터가 저장된다.
• 저장한도 5MB 이며 서버로 전송되지 않음.
• key,value 형식으로 보관한다.

Web Storage 사용법

• setItem(key, value) – 키-값 쌍을 보관한다.
• getItem(key) – 키에 해당하는 값을 받아온다.
• removeItem(key) – 키와 해당 값을 삭제한다.
• clear() – 모든 것을 삭제한다.
• key(index) – 인덱스(index)에 해당하는 키를 받아온다.
• length – 저장된 항목의 개수를 얻는다.

주의점

• 문자열로만 사용이 가능하다.
  숫자나 객체 등 다른 자료형을 사용하게 되면 문자열로 자동 변환 된다.

그래서 JSON을 사용해서 객체로 담아야 한다.

localStorage.user={email:"test12@naver.com"};
console.log(localStorage.user)// [object Object]

localStorage.user=JSON.stringify({email:"test12@naver.com"});
const user = JSON.parse(localStorage.user)
console.log(user.email) // "test12@naver.com"

Cookie

• 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다.
• 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다.
• 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할때 주로 사용한다.
• api 호출로 서버에 부담이 가고 용량이 4kb로 적으며 암호화가 불가능하다.

웹스토리지 개념
웹스토리지 ,쿠키 설명
웹스토리 사용법