서론
자사에서 생성한 쿠키로 인해 고객사 사이트에 페이지 로딩 속도 저하가 있었다고 합니다. 믿기지 않지만 쿠키 제거 후 테스트 결과 로딩 속도가 상당히 향상됬다고 하는데 물론 해당 도메인에서 설정된 쿠키는 매 Http 요청마다 서버로 전송되는 것도 사실입니다.
어차피 Cookie 사용 로직을 차후 Web Storage 로 변환할 생각이었으니 관련 정보를 찾아보았습니다.
Web Storage와 Cookie 차이
Web Storage는 서버로 전송하지 않음
Web Storage와 cookie의 가장 중요한 차이점 중 하나는 cookie와는 달리모든 HTTP 요청에서 데이터를 주고받을 필요가 없다는 것입니다. HTTP 요청에서 데이터를 주고받지 않고 Web Storage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있습니다.
제한
용량 제한
Web Storage는 최대 5MB의 정보를 저장할 수 있습니다. cookie가 보유할 수 있는 4KB보다 훨씬 더 큽니다.
갯수 제한
Web Stroage와 달리는 쿠키는 도메인 당 20개 까지
데이터형
문자열만 저장가능한 cookie와 달리 webstorage 객체 정보를 저장 가능
시간제한 설정
시간제한 설정이 가능한 cookie와 달리 webstorage는 설정이 불가능. 이 점 때문에 모든 cookie를 webstorage로 전환하는 건 힘들듯..
LocalStorage와 SessionStorage
LocalStorage
저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능.
SessionStorage
SessionStorage는 데이터가 지속적으로 보관되지 않습니다. 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지.
WebView 에서 LocalStorage 권한 문제
LocalStorage 를 사용할 경우 추가적으로 주의할 점.
만약 안드로이드 기기 환경에서 앱 위에 WebView 를 띄운 상황에서 LocalStorage를 사용하려고 할 경우 에러가 날 수 있습니다. LocalStorage 사용 권한이 없기 때문인데 앱에서 setDomStorageEnabled 값을 사용으로 설정해야 LocalStorage를 사용할 수 있습니다. (기본값은 미사용)
예제
Web Storage는 window 객체에 포함되기 때문에, 별도의 함수 선언 없이 저장, 불러오기가 가능합니다. data type으로 String, Boolean, Number, null, undefined 모두 저장 가능하지만, 문자열로 변환되어서 저장됩니다. 만약 객체를 통체로 저장하고 싶다면 JSON.stringify를 사용
localStorage.setItem("localStorageTest", JSON.stringify({"aaa" : 123}));
localStorage.getItem("localStorageTest");
localStorage.removeItem("localStorageTest");
// 전체 localStorage 삭제
localStorage.clear();
sessionStorage.setItem("sessionStorageTest", JSON.stringify({"aaa" : 123}));
sessionStorage.getItem("sessionStorageTest");
sessionStorage.removeItem("sessionStorageTest");
// 전체 sessionStorage 삭제
sessionStorage.clear();참고
