header

Day 11 - 2022/10/31

💡 새롭게 알게된 점

Client Side에서 Data 저장하기

쿠키는 브라우저에 저장되는 작은 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부이다.

다른 저장 방식에 비해 가장 오래된 방식이다.

Cookie 추가하기
document.cookie = 'language=javascript';
이전 쿠키를 덮어쓰지 않고 새로 추가된다.
Cookie 읽어오기
const cookies = document.cookie;
각 쿠키는 세미콜론으로 구분되어 있어 불러온 후 split() 같은 함수로 쪼개서 사용해야 한다.
Cookie 유효기간 넣기
document.cookie = `user=ryu; expires=Fri, 4 Nov 2022 06:26:27 GMT`;
   
document.cookie = `user=ryu; max-age=3600`;
expires에 GMT string 값을 넣어 유효기간을 설정할 수 있다.

또는 max-age로 초 단위의 값을 넣어 유효기간을 설정할 수 있다.
Cookie의 단점

HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청의 크기도 커진다.

사이즈에 제한이 있다.

여러 보안 취약점이 존재한다.

Local Storage

Local Storage는 key, value 기반으로 로컬에 데이터를 저장할 수 있는 storage이다.

도메인 기반으로 storage가 생성되기 때문에 도메인만 같다면, 여러 탭 내에서 같은 storage가 공유된다.

직접 삭제하거나 storage를 날리지 않는 한 삭제되지 않는다.

Local Storage에는 string 형태의 데이터만 저장할 수 있기 때문에 JSON.stringify로 저장 후 JSON.parse로 꺼낸 값을 파싱하는 형태로 사용한다.

Local Storage 값 저장하기
// window는 생략 가능
    
// 1
window.localStorage.name = 'ryu';
    
// 2
window.localStorage['name'] = 'ryu';
    
// 3
window.localStorage.setItem('name', 'ryu');
property를 수정하는 식으로 local storage에 값을 저장하면 length, toString과 같은 내장 함수들을 덮어 씌울 수 있기 때문에 위의 세가지 방법 중 3번이 권장된다.
Local Storage 값 가져오기
const storedName = localStorage.getItem('name');
Local Storage 값 삭제하기
// 하나의 key-value 쌍 삭제하기
localStorage.removeItem('name');
    
// 전체 삭제하기
localStorage.clear();

Session Storage

Session Storage는 전반적으로 Local Storage와 유사하지만, 브라우저를 닫으면 저장된 내용이 초기화된다.

Storage 사용 시 유의사항

외부 툴 등을 이용해 storage에 저장된 json string을 올바르지 않은 형태로 바꿨을 때 예외 처리를 해주지 않았다면 문제가 발생할 수 있다.

또한 Local Storage나 Session Storage는 용량 제한이 있기에 캐싱을 잘못 설계하면, 예를 들어 캐시를 날리는 코드를 짜지 않거나 한 경우에 캐시가 너무 많이 쌓이게 되어 setItem시 에러가 발생하는 경우가 있다.

따라서 storage를 다루는 것을 별도의 함수로 분리하고, try-catch로 처리한다.

const storage = (function(storage) {
    const setItem = (key, value) => {
        try {
            storage.setItem(key, value);
        } catch (e) {
            console.log(e.message);
        }
    }
    
    const getItem = (key, defaultValue) => {
        try {
            const storedValue = storage.getItem(key);
            if (storedValue) return JSON.parse(storedValue);
    
            return defaultValue;
        } catch (e) {
            console.log(e.message);
            return defaultValue;
        }
    }
    
    const removeItem = (key) => {
        storage.removeItem(key);
    }
    
    return {
        setItem,
        getItem,
        removeItem,
    }
})(window.localStorage);

❗️ 느낀점

Storage에 대한 공부를 해보니 여태까지 LocalStorage나 SessionStorage를 사용할 때 문제점이 발생할 수 있는 부분에 대한 예외 처리를 잘 해주지 않았던 것 같다.

Storage 속 아이템을 저장, 삭제, 가져올 때 별도의 함수로 분리하여 사용한다는 것을 잘 기억해두자!

오늘도 고생했다👊