TIL - 1

🚀 TIL

localStorage

localStorage를 사용해서 현재 하고 있는 프로젝트를 구성하고 마치 localStorage를 서버처럼 사용하는 것으로 바꿔볼 생각이다. localStorage를 사용한지 시간이 조금 지난 것 같아서 그에 대해서 정리도 하고 자유롭게 사용하는 것을 목적으로 두고 공부했다(하고 있는 플젝에 넣는 것은 덤!)

스토리지에는 로컬 스토리지와 세션 스토리지가 있다.
로컬 스토리지는 사용자가 지우지 않는한 영구적으로 유지되지만, 세션 스토리지는 브라우저를 닫을 경우 제거가 된다.

로컬 스토리지의 사용법은 정말 간단하다.

[저장]

localStorage.setItem(키,값);

[조회]

localStorage.getItem(키,값);

[삭제]

localStorage.removeItem(키,값);

[저장소 전체 삭제]

localStorage.clear();

사용법은 위와 같다.

이를 바탕으로 현재 프로젝트에 접목시켜 보겠다. 사실 로컬스토리지를 전에 사용했을 때는 서버로부터 토큰을 받고 그 토큰을 로컬스토리지에 저장하고 로그인 유지가 될 때 사용했었다. 그러나 지금은 백엔드가 없는 상태에서 프론트엔드로만 작업을 하고 있는데, redux에서만 모든 것을 관리하려다 보니 코드가 의미없이 길어지는 것 같고 제대로 된 서버역할을 할 수 없는 것 같아서, 로컬 스토리지를 사용하려 한다.

원래의 로컬스토리지는 주로 키 값을 위처럼 이용하여 단일적으로 필요한 값을 많이 사용한다고 알고 있는데 그렇다면 배열처럼 사용을 하고 추가 삭제를 하기 위해서는 어떻게 해야 할지를 고민 해봤다.

const onSubmitForm = useCallback(
        (e) => {
            e.preventDefault();            
            if (localStorage.data === undefined) {
                localStorage.setItem("data", JSON.stringify([]));
            }
            let dataFile = JSON.parse(localStorage.getItem("data"));
            dataFile.unshift({
                User: {
                    id: userId,
                },
                Data: {
                    id: uuidv4(),
                    name: name,
                    tag: tag,
                    author: author,
                    explanation: explanation,
                    file: file,
                },
            });
            localStorage.setItem("data", JSON.stringify(dataFile));
        },
        [name, author, explanation, tag, file]
    );

위와 같은 형식으로 하면된다. useState를 써서도 할 수 있겠지만 굳이 그럴 필요까지는 없을 것 같아서 간단하게 변수 하나를 이용해서 만들었다.
file에는 이미지 파일의 preview 경로가 들어가 있어서 localStorage.getItem을 추후에 사용해서 저이미지값을 리덕스로 가져와 저장하고 전체 저장소 값을 이용해 (실제 백과 프론트를 사용하는 것처럼) 화면에서 사용자에게 보여주려 한다.

위에 보면 stringify가 있는데 이것은 localStorage는 string 형식만 들어가기 때문에 객체, 배열형식이 들어갈 수 없지만 JSON.stringify를 이용해서 넣으면 배열,객체 값을 string형식으로 변환해서 넣을 수 있다. 가져올때는 JSON.parse를 이용하면 된다 !