[Web] 웹 스토리지 (localStorage & sessionStorage)

웹 스토리지에 대해 공부해보자 😎

 

 

저장해야 할 데이터가 영구히 사용되지 않거나, 유실되도 괜찮다면 서버 단에 저장하는게 낭비일 수 있다. 이 경우 브라우저에 저장하는 방법인 웹 스토리지를 사용하면 된다. 웹 스토리지 객체는 쿠키와 다르게 서버로 전송되지 않으며, 브라우저 저장 공간에 key-value 형태로 저장된다.

 

구현하던 프로젝트에서 사용자마다 항목 리스트에서 특정 항목을 즐겨찾기 설정할 수 있었는데, 이 즐겨찾기 데이터는 다른 사용자들에게 공유되지 않을 값이고 유실되도 괜찮다고 생각해 웹 스토리지에 저장하는 방법을 택했다.

 

 

 

1. 개념

---

웹 스토리지는 HTML5 이후 브라우저에서 제공하는 자바스크립트 API이며 `window` 객체를 상속받는다. 종류로는 LocalStorage와 SessionStorage가 있다.

 

LocalStorage

• *출처(origin)가 같은 경우, 저장된 데이터는 모든 탭과 창에서 공유
• 브라우저를 닫아도 데이터가 유지
• 세션이 끝나더라도 데이터가 유지
• 값이 소멸되지 않으므로 직접 삭제해줘야 한다.

 

 

SessionStorage

• 현재 열린 탭 내에서만 데이터 유지 (세션이 종료되기 전까지 지속)
• 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장된다.
• 브라우저를 닫으면 데이터가 소멸된다.

 

 

* 출처(Origin)?

서버의 위치를 찾아가기 위해 필요한 (Protocol, Host, Port번호)를 합쳐놓은 것. 이 세개의 값 중 하나라도 다르다면 다른 출처이다.

 

 

-> 간단한 사이트 설정을 잠깐 기억하기 위해서는 SessionStorage를 사용하고, 사용자가 데이터를 제거하지 않는 이상 유지되도록 하려면 LocalStorage를 사용하면 된다.

 

 

 

2. 사용법

---

두 스토리지 객체는 다음과 같이 동일한 메서드와 프로퍼티를 사용한다.

 

메서드	설명
setItem(key, value)	키-값 쌍을 저장
getItem(key)	해당 키에 매칭되는 값 조회
removeItem(key)	해당 키와 값을 삭제
clear()	현재 도메인에 저장된 스토리지 객체(localStorage or sessionStorage)를 모두 삭제
key(index)	인덱스에 해당하는 키를 조회
length	저장된 데이터의 개수를 조회

 

 

브라우저에서 개발자도구를 열고 localStorage.setItem('id', 1234)로 값을 저장한 후, localStorage.getItem('id')로 확인해 볼 수 있다.

 

 

Application > Local Storage > 현재 사이트 탭에서 저장된 값을 확인

 

sessionStorage도 동일한 방법으로 값을 저장하고 조회할 수 있고, 마찬가지로 개발자도구 > Application > Session Storage > 현재 사이트 탭에서 저장된 값을 확인 할 수 있다.

 

 

주의

• 같은 키값으로 `setItem()`을 설정한다면 새로운 값으로 덮어씌운다.
• 문자형(String) 데이터 타입만 지원한다. 숫자형 데이터를 입력하면 문자형으로 출력된다.

• 따라서, 배열과 json 객체를 저장하려는 경우에도 JSON.stringify()으로 변환하고 저장해줘야 한다.

 

 

 

3. 실습

---

• 구현환경 : React
• 브라우저 : Chrome

 

프로젝트 내 여러 컴포넌트에서 사용될 수 있으므로 훅으로 만들었다.

 

 

1. LocalStorage

• `useLocalStorageHook` 파일 생성

import { useEffect, useState } from "react";

// 값 초기화. 저장된 값이 있는 경우 저장된 값을 리턴
function getLocalStorage(key, initialValue) {
    const saved = localStorage.getItem(key);
    const initial = JSON.parse(saved);

    return initial || initialValue;
}

// 값 변경
function setLocalStorage(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
}

export const useLocalStorageHook = (key, initialValue) => {
    const [value, setValue] = useState(() => {
        return getLocalStorage(key, initialValue)
    });

    // key, value가 변경되면 값을 갱신한다
    useEffect(() => {
        setLocalStorage(key, value)
    }, [key, value]);

    return [value, setValue];
}

• 훅이 생성되면 해당 key값을 초기화해주고, 값이 변경되면 `localStorage.setItem()`를 실행시킨다.

 

• useLocalStorageHook을 사용하는 컴포넌트 생성

import { useEffect } from "react";
import { useLocalStorageHook } from "./useLocalStorageHook";

export default function TestComponent() {
    // useLocalStorageHook을 이용해 key가 'test'인 객체 초기화
    const [testValue, setTestValue] = useLocalStorageHook("test", null);

    // 값 초기화
    useEffect(() => {
        // 이미 key값이 'test'인 localStorage가 있다면 종료
        if (testValue) {
            return;
        }

        let data = {
            name: ''
        }
        setTestValue(data);
    }, []);

    const updateTestValue = (value) => {
        let data = {
            ...testValue,
            name: value
        }

        if (!value) {
            data = {
                ...testValue,
                name: null
            }
        }

        setTestValue(data);
    }

    return (
        <>
            <div>test page</div>
            <button onClick={() => updateTestValue('chaego')}>
                값 변경
            </button>
        </>
    )
}

• test: {name: '~'} 형태의 값을 저장하려 한다면, null로 초기화한다.
• 값 변경 버튼을 누르면 `updateTestValue()`가 실행되고, `{"name" : ""}`에서 `{"name" : "chaego"}`로 변경된다.

 

 

2. SessionStorage

• `useSessionStorageHook` 파일 생성

import { useEffect, useState } from "react";

// 값 초기화. 저장된 값이 있는 경우 저장된 값을 리턴
function getSessionStorage(key, initialValue) {
    const saved = sessionStorage.getItem(key);
    const initial = JSON.parse(saved);

    return initial || initialValue;
}

function setSessionStorage(key, value) {
    sessionStorage.setItem(key, JSON.stringify(value));
}

export const useSessionStorageHook = (key, initialValue) => {
    const [value, setValue] = useState(() => {
        return getSessionStorage(key, initialValue)
    });

    // key, value가 변경되면 값을 갱신한다
    useEffect(() => {
        setSessionStorage(key, value)
    }, [key, value]);

    return [value, setValue];
}

• 사용법은 localStorage와 동일하다 (생략)

 

 

 

4. 마무리

---

모든 데이터를 서버나 데이터베이스에 저장한다면 저장해야 할 데이터가 너무 많아질 것이다. 웹 스토리지 객체를 사용해보니 중요하지 않은 데이터를 쉽게 기억해 사용할 수 있고 그만큼 서버 자원도 아낄 수 있었다.

하지만 LocalStorage 같은 경우는 직접 값을 삭제해주지 않으면, 브라우저에 계속 남게 되므로 주의해서 사용해야 한다.

 

 

 

 

참고자료 😃

https://ko.javascript.info/localstorage

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage