Under the Sign of Saturn

WebStorage의 API - 두 객체 모두 동일한 메서드와 프로퍼티를 갖는다. setItem(key, value) // 키-쌍을 보관 getItem(key) // 키에 해당하는 값을 받아온다. removeItem(key) // 키와 해당 값을 삭제한다. clear() // 모든 것을 삭제한다. key(index) // 인덱스에 해당하는 키를 받아온다. length // 저장된 항목의 개수를 받아온다. - 두 스토리지 객체는 setItem/getItem/removeItem 메서드를 지원하는 것으로 보아 Map과 유사하지만, 인덱스를 사용해 키에 접근하는 방식은 다르다고 볼 수 있다. - 웹 스토리지 객체는 origin(domain/port/protocol)에 묶여 있다. (프로토콜과 서브 도메인이 다르..

Vuex를 사용해서 로그인 정보를 state에 저장하고, 페이지가 전환되어도 그대로 유지되도록 하는 방법을 찾다가, vuex의 state를 localStorage로 자동으로 동기화해주는 라이브러리 vuex-persistedState를 사용해봤다. 이전 프로젝트에서도 사이드바에 유저 정보가 바로바로 반영이 안 되거나, 렌더링이 원하는 타이밍에 제대로 되지 않는 이슈가 있었는데, Vue.js가 아무래도 SPA를 기반으로 하다보니, 이런 상황이 앞으로도 자주 발생할 것 같다는 생각이 들었다. 브라우저에 데이터를 저장하는 대표적인 방법은 HTML5에 포함된 자료 구조인 Web Storage의 localStorage, sessionStorage가 있다. 쿠키와 개념이 비슷하지만, 쿠키에서 조금 더 개선점을 가지는..