Written by Parkdev
on January 25, 2024

[React] LocalStorage를 사용해보자

localStorage를 사용해보자

기본적으로 모든 상태는 새로고침하면 초기값으로 돌아간다
하지만 값을 저장해야할 경우도 반드시 존재한다.
본래 DB를 생성해 DB에 저장하는것이 맞지만, 임시적으로 사용할 수 있는것이 local Storage이다.
- 반영구적으로 저장 가능하다.

LocalStorage 의 특징

반영구정으로 저장가능하다
- 유저가 브라우저를 청소하지 않는 이상 계속 저장되어있다.
Key : Value형태로 저장할 수 있다.
문자 데이터만 저장할 수 있으며, 5MB까지 저장 가능하다
- 그러면 캐시데이터로 쓸 수 있지않을까 생각된다.
Session Storage
- 브라우저를 끄면 데이터가 사라진다.

사용처

최근 본 상품

LocalStorage 써보기

콘솔텝에다가 실행해보자

//저장
localStorage.setItem('key', 'value')

//출력
localStorage.getItem('key')

//삭제
localStorage.removeItem('age')

//수정은 꺼내서 값을 바꾸고 다시 저장해야한다.

//sessionStorage도 동일한 방법으로 사용가능하다

LocalStorage에 Array/object는 저장이 불가능하지만 JSON형식으로 저장하면 사용이 가능하다.

let obj = { name : "park"}
localStorage.setItem('data', JSON.stringify(obj))
// json을 string으로 변환해주는 JSON.stringify를 사용

let result =  localStroage.getItem('data') //JSON string으로 그대로 출력된다. Obj용 함수사용은 아직 불가능하다.

let result = JSON.parse(localStorage.getItem('data')) //이러면 바로 Obj가 된다.

예제

상세페이지에서 봤던 상품들의 번호들을 Local Storage에 저장하기
- 주의1. 중복 번호 막기 (set자료형을 사용)
- 사이트 처음 접속한 사람에게 자료형을 먼저 만들어야한다 (그러면 뭘써야할까?)
localStorage을 통해 최근 본 상품 사이드 네비 바를 만들어보자.

풀이

1번

//우선 처음 접속한 사람들에게 자료구조를 먼저 만들고
useEffect(()=>{
    localStorage.setItem('watched',JSON.stringify( [] ))
},[])

let [recent, setRecent] = useState(JSON.parse(localStorage.getItem('watched')));

//버튼에 로직 추가
onClick={() => {
    //값을 불러와 set으로 중복 제거
    let arr = new Set(JSON.parse(localStorage.getItem('watched'))).add(props.shoe.id); 
    //추가된 값을 다시 localStorage에 저장
    localStorage.setItem('watched', JSON.stringify([...arr]));
    //페이지 이동
    navigate(link);
}}

2번

{/* Local Storage 보여주기 */}
{recent.length != 0 ?
    <>
      <Row xs="auto" className='mt-4'>
        <div className="w-full flex justify-between">
          <div className='flex items-center'>최근 본 목록</div>
          <button className="btn btn-warning" onClick={()=>setRecent([])}>목록 삭제</button>
        </div>

      </Row>
      <div className="row mt-4">
        {
          recent.map(function (item, index) {
            return (
              <Compo key={item} shoe={shoes[item]} recent={recent}></Compo>
            )
          })
        }
      </div>
    </>
: null}

다른 풀이

상세 페이지에 접근할때마다 생성 하면 되므로 Detail.js페이지에서 useEffect를 사용하면 된다.

   useEffect(()=> {
    let arr = localStorage.getItem('watched');
    arr = JSON.parse(arr)
    arr.push(찾은상품.id)
    arr = new Set(arr)
    arr = Array.from(arr)
    localStorage.setItem('watched', JSON.stringify(arr))
  }, [])

참고

반영구적 저장을 해주기 때문에 이를 상태관리에 활용하는 경우가 있다.
그리고 Redux에서 이를 쉽게 도와주는 라이브러리도 있다.
- redux-persist
다른 상태 관리 라이브러리에도 이런 영구적 상태 관리를 포함한 라이브러리들이 많다.
- Jotai
- Zustand
- Redux보다 사용하기 좀더 쉽다!

← → Top