[CS study] 로컬스토리지 세션스토리지

클라이언트(브라우저)에 데이터를 저장할 수 있는 기술이다

 

웹스토리지란?

브라우저 개발자도구에서 애플리케이션 탭을 보면 스토리지가 여러가지가 있다는 것을 알 수 있다

이중에서 자주 사용하는 2개가 로컬/ 세션 스토리지이다 

키와 값의  쌍으로 이루어진 간단한 데이터가 저장됨

저장한데이터가 어떠한범위내에서 얼마나 오래 보관되냐에 따라 둘의 차이점이 있다 

세션스토리지는 웹페이지의 세션이 끝날 때 저장 된 데이터가 지워짐

로컬스토리지는 안지워짐

localStorage.setIemt("a", 1) a라는키에 1이라는 값을 넣어서 로컬스토리지에 넣겠다

다른 탭를 열어도 동일한걸 알 수있고 다른 탭에서 수정하면 이전 탭도 수정이 된다

세션스토리지는 아니다 탭마다 다른 값이 있는 것을 알 수 있다.

로컬스토리지와 세션스토리지는 api가 동일하게 되어있기에 하나만 알면 다 알 수 있다

키와 값의  쌍으로 이루어진 간단한 데이터가 저장됨~~~

window.localStorage가 원래 써야하지만 대부분의 window객체는 생략이 가능하기에 걍 localStorage만 적어도 가능

저장할 때에는 setItem("키", "값") 

읽어올 때에는 getItem("키")

데이터를 삭제할 때에는 removeItem("키")

데이터가 얼마만큼 있는지 궁금하다면 length

모두 지울때는 clear()

 

주의사항: 문자형 데이터타입만을 지원하기에 숫자형은 지원하지 않는다 숫자쓰면 문자나옴

객체형 데이터를 저장할때 좀 빡셈 객체를 넣었지만 갑자기 문자열이 나옴 ㅋㅋㅋ '[object, Object]'

그렇기에 방금처럼 객체를 저장하고싶다면 JSON.stringify를 통해서 직렬화 한 것을 저장하면 됨

프로그램 내에서 객체처럼 사용하고 싶다면 JSON.parse를 통해서 객체로 바꾸어주면 됨