김민태의 데브캠프 2기 - localStorage Wrapper 생성하기

 

이번시간에는, localStorage의 set, get, remove의 기능을 정의한 파일을 만들고, 그것을 다른 파일에서 불러와 사용하는 

예시를 보여주고자 한다.

 

우선 src에 utils란 폴더를 만들고, storage.ts 파일을 생성한다.

파일 구조는 다음과 같다.

 

그리고 다음과 같이 작성한다.

const storage = {
    set: (key: string, value: any) => {
        localStorage.setItem(key,JSON.stringify(value));
    },

    get: <T>(key: string, defaultValuie?: T): T => {
        const value= localStorage.getItem(key);
        return (value ? JSON.parse(value) : defaultValuie) as T;
    },

    remove: (key: string) => {
        localStorage.removeItem(key)
    }
}

export default storage;

 

 

다른 파일에서 사용할 떄는 ..

import storage from '../utils/storage' // 우선 import하고 

// get의 자료형과 key값을 넣어준다.

const initialUserData = storage.get<User>('userData')

// set은 key와 value를 넣어준다.
storage.set('userData', result.user);

// remove는 key를 넣어준다.
storage.remove('userData');