local Storage 사용하기

localStorage

DB나 쿠키를 이용하지 않고도 브라우저 내에 key-value 값을 저장할 수 있음

쿠키와 다른점

• 쿠키보다 용량이 많아서 더 많은 데이터를 저장할 수 있음
• 쿠키는 HTTP 요청 헤더에 포함되어서 서버에 전송되지만, localStorage는 서버로 전송되지 않음
• 쿠키는 만료기간을 설정할 수 있지만, localStorage는 수동으로 삭제하지 않는 이상 유지됨
• 쿠키는 여러 도메인에서 공유가 가능하지만, localStorage는 독립적으로 유지됨(http냐 https냐에 따라서도 다르게 유지)

쿠키는 서버로 전송이 가능하기 때문에 서버와 상호작용을 통해 많은 일을 할 수 있고
localStorage는 클라이언트 측에서 진짜 저장만 할 수 있음

사용

setItem으로 저장하고, getItem으로 가져올 수 있는데
중요한 건 문자열의 형태로 저장됨 - setItem(1,[2]) 이렇게 해도 문자열처럼 저장됨
그래서 객체(배열)을 저장하고 싶다면 localStorage.setItem(key,JSON.stringify(객체)) 한 후에
가져올 때는 JSON.parse(localStorage.getItem(key))의 과정을 거쳐서 사용하거나
그렇게 많은 배열을 저장하지 않을 때는
'a,b,c,d' 이런 식으로 문자열로 저장한 다음에 가져와서 split(',') 이런식으로도 사용 가능

또한 getItem했을 때 해당 key가 없으면 null이 반환되기 때문에
getItem(key,value) || 안될때 사용할 값 - 이런식으로 예외처리를 해줘야 함