#storage

storage는 html5에서 추가되었으며 이전에는 cookie가 그것을 대체 하였었다.
storage는 window 객체의 하위객체이고 영구 저장인 localStorage와 브라우저 실행 중에만 유효한 sessionStorage 방식으로 나뉜다.

localStorage는 만료기간이 없어서 사용자가 지우지 않는한 브라우저에 남아있는다.
sessionStorage에 저장된 데이터는 세션이 끝나면 종료된다.(브라우저 탭을 닫을때 사라지기때문에 주로 로그인데이터 저장같은 일시적으로 데이터를 저장 할 때 쓴다.)

localStorage에 저장한 자료는 페이지 프로토콜별로 구분한다.
예를들면 http://test.com 으로 방문한 페이지에서 저장한 데이터는
https://test.com 와는 다른 localStorage에 저장된다.(프로토콜, 호스트, 포트가 같아야 스토리지가 공유된다)

window.localStorage로 접근할 수 있으며 아시다싶이 window를 생략하고 쓸수있다.

메서드로는

localStorage.setItem('test', 'hello');
localStorage.getItem('test'); // "hello"
localStorage.removeItem('test'); // 특정 키 제거
localStorage.clear() // 스토리지 전체 삭제

이런것이 있다.

value에 들어가는 값은 모두 문자열로 반환된다.
메서드에 대한 간단한 예를 들면

//문자열 저장
localStorage.setItem('name', 'sonteve');
localStorage.getItem('name');  //  "sonteve"
//숫자 저장
localStorage.setItem('age',19);
localStorage.getItem('age'); // 19
localStorage; // {name: "sonteve", age: 19, length: 2}
localStorage.removeItem('age'); // 특정 키 제거
localStorage; // {name: "sonteve", length: 1}

//객체 를 저장해보자
localStorage.setItem('user', {id: 1, name:'sonteve'});
localStorage.getItem('user'); // [object Object]   이상하다.

객체를 저장하면 toString 메서드 형태로 저장되기때문에
객체를 저장하려면 value값에 들어갈 객체를 문자열로 바꿔서 저장해야한다.

localStorage.setItem('user', JSON.stringify({id: 1, name:'sonteve'}));
const user = localStorage.getItem('user'); // {id: 1, name:'sonteve'}
 // 문자열
console.log(user.id, user.name) // Error
// 없는 property에 접근하기때문에 error발생

getItem으로 데이터를 가져오더라도 string형태이기 때문에 .이나 ['key']로 객체내부의 값을 참조할수가 없다. 참조하려며 다시 객체로 파싱해주어야 한다.

const user = JSON.parse(localStorage.getItem('user')); // {id:1 , name: 'sonteve'}
// 객체
console.log(user.id, user.name)  // 1 "sonteve" 

sessionStorage의 메서드는 똑같다.
브라우저를 종료하거나 탭을 닫으면 사라질뿐이다.

#느낀점

cookie와 localstorage를 공부한지는 조금 되었다.
오늘 어떤분이 localstorage에 대한 질문을 주셔서 나는 잘 알고있는건가 라는 의문점이 정리해보았다. 평소에는 로그인 관련해서 jwt방식이나 session을 활용할 때 session key나 token을 cookie에 저장하는 방식을 주로 이용하고있다.