1. 로컬스토리지

• 브라우저에서 제공하는 데이터 저장소이다
• 일반적으로 쿠키보다 더 많은 데이터를 저장 할 수 있다
• 모든 탭에서 데이터를 공유함
• XSS(크로스 사이트 스크립팅) 공격에 취약하다
• 민감한 요소는 저장하지 않는다
• 키와 값의 형태를 갖는다
• 유저가 언제든 데이터를 삭제하고 추가할수있다
• 브라우저를 종료해도 데이터가 삭제 되지 않음

'1. 로컬스토리지 저장방법'
localStorage.setItem('키값', 저장 할 값)

ex)
const userId = 'u1';
localStorage.setItem('uid', userId)
'저장될 값은 문자열로 쉽게 바뀔수 있는 데이터여야함'
-----------------------------------------------------
  
'2. 로컬스토리지에서 데이터 가져오기'
localStorage.getItem('키값')

ex) 1번으로 데이터가 이미 저장되어있다고 가정
const id = localStorage.getItem('uid') // 'u1'

-----------------------------------------------------
      
'3. 객체 데이터 저장하고 가져오기'
'객체를 문자열로 바꾸어 저장하기 위해 JSON을 이용함'

ex) 
const user = {
  name : "홍길동",
  age : 20,
}

localStorage.setItem('user', JSON.stringify(user));

const id = JSON.parse(localStorage.getItem('user'))
 // {
 //  name : "홍길동",
 //  age : 20,
 // }

---

2. 세션스토리지

• 브라우저가 종료되거나 탭이 닫히면 데이터가 삭제됨
• 데이터는 브라우저의 각 탭마다 독립적임
• 로컬스토리지와 사용법이 같음

'1. 세션스토리지 사용방법'
sessionStorage.setItem('키값', 저장 할 값)

ex)
const userId = 'u1';
sessionStorage.setItem('uid', userId) //데이터 저장
sessionStorage.getItem('키값') //데이터 가져오기

---

3. 쿠키

• 서버가 사용자의 브라우저에 전송하는 작은 데이터 조각임
• 프론트 측 자바스크립트로 브라우저에서 쿠키에 접근 할 수 도있음
• 서버가 HTTP 헤더의 Set-Cookie에 내용을 넣어 전달하면 브라우저가 자동으로 저장함
• 브라우저는 데이터를 저장해두었다가 서버에 데이터를 요청할때 함께 전송함

'쿠키를 테스트 해보려면 웹 서버가 가동되고 있어야함'

'자바스크립트를 이용한 쿠키'
const userId = 'u1';
document.cookie = `uid=${userId}`; // 쿠키 설정하기

console.log(document.cookie); // uid=u1;

'만약 다른 쿠키들도 더 저장되어있다면? 아래처럼 표시됨'
console.log(document.cookie); // uid=u1; ?키?=?값?; ???=???

• 쿠키는 원하는 키값을 찾는 api를 제공하지 않아서 다양한 메서드를 응용해서 찾아야함
• 쿠키도 객체를 저장하기 위해선 JSON.stringify()를 활용함
• max-age를 이용해 만료 시간에 대한 초를 지정할 수 있음
• expires를 이용해 만료 날짜에 대한 기간을 지정할 수 있음

'만료 시간(초) 설정'
document.cookie = `uid=${userId}; max-age=3600`; // 1시간 뒤에 쿠키가 만료됨

'만료 날짜 설정'
const expiresDate = new Date();
expiresDate.setDate(expiresDate.getDate() + 7); // 7일 후의 날짜를 설정

document.cookie = `uid=u1; expires=${expiresDate.toUTCString()};`;