웹 스토리지 객체 localStorage와 sessionStorage

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.

이 둘을 사용하면 페이지를 새로 고침하고 심지어 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아 있다. 

 

근데 사실 쿠키를 쓰면 더 간편하게 할 수 있는데 왜 Storage를 쓰는 것일까 궁금해서 찾아 봤다. 

• 웹 스토리지 객체는 네트워크 요청 시 서버로 전송이 되지 않아 더 많은 자료를 보관할 수 있다. 
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작 할 수 없고 모두 자바스크립트로 수행 된다. 
• 웹스토리지 객체는 도메인,프로토콜,포트로 정의 되는 오리진에 묶여있어 함부러 데이터에 접근 할 수 없다. 

 

두 스토리지 객체는 동일한 메서드와 properties를 제공한다. 

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

 

sessionStorage.setItem("loginId", "aaa"); //세션에 키 - 값으로 값을 저장
let loginId = sessionStorage.getItem("loginId"); // 세션에 저장한 값 읽기
alert(loginId) // aaa 가 알림으로 나온다 
sessionStorage.removeItem("loginId"); //값을 삭제 시키기

 

적재적소에 자바스크립트 안에서 활용한다면 간편하게 로그인 정보 및 중요 정보들을 이용할 수 있을 것 같다!!