[React] session/local storage에 데이터 저장하기 (2023.06.05)

 

Session/Local Storage에 데이터 저장하기

 

    /**

     * Local Storage vs Session Storage

     * - 주의사항! 둘 다 브라우저에 저장을 하는 데이터

     * - local Storage : 동일한 PC + 동일한 브라우저일 경우, 저장된 데이터를 불러 올 수 있음

     *      ex. 자동 로그인, 장바구니, ...

     *      => 브라우저를 닫더라도 데이터가 계속해서 저장되어있다.

     * - session Storage : 브라우저 창이 종료되면 세션도 함께 종료되면서 데이터 소멸됨

     *      ex. 로그인 기록

     */

 

백엔드, 프론트 어디서 관리할 것인지는 자유

순서의 차이일뿐!

 

1. Local Storage

자동 로그인, 장바구니와 같이 보안이 딱히 필요하지 않을 때 사용

 

1.1. 저장하기

localStorage.setItem('이름', 저장할값)

 

const setLocal = ()=>{

        console.log('local storage 저장', localText);

        //로컬 스토리지에 저장하기

        localStorage.setItem('data', localText)

    }

 

로컬 스토리지는 데이터가 누적되지 않음

누적하고 싶으면 새로운 이름을 지정하여 저장해야 함!

 

 

1.2. 가져오기

localStorage.getItem('가져오고싶은데이터이름')

 

    const getLocal = ()=>{

        //로컬 스토리지에서 데이터 꺼내오기

        setLocalText2(localStorage.getItem('data'))

    }

 

1.3. 삭제하기

localStorage.removeItem('삭제할 데이터 이름')

 

            {/* .clear() => 스토리지 초기화

            localStorage.clear()

            */}

<button onClick={()=>{window.localStorage.removeItem('data')}}>local storage 삭제</button>

 

 

2. Session Storage

2.1. 저장하기

sessionStorage.setItem('이름', 저장할값)

 

const setSession = ()=>{

        console.log('session storage 저장', sessionText);

        sessionStorage.setItem('data', sessionText)

    }

 

 

2.2. 가져오기

sessionStorage.getItem('가지고올 데이터 이름')

 

    const getSession = ()=>{

        setSessionText2(sessionStorage.getItem('data'))

    }

 

2.3. 삭제하기

보통 로그아웃 기능에 많이 사용

 

sessionStorage.removeItem('삭제할 데이터 이름')

<button onClick={()=>{window.sessionStorage.removeItem('data')}}>session storage 삭제</button>

 

 

🎈 구현 화면

 

🎈 오류

too many Render ~~~~ (무한루프)

괄호 잘못 입력했을 수 있음

 

 

🎈 전체 코드

import React from 'react'
import { useState } from 'react'

const Storage = () => {

    /**
     * Local Storage vs Session Storage
     * - 주의사항! 둘 다 브라우저에 저장을 하는 데이터
     * - local Storage : 동일한 PC + 동일한 브라우저일 경우, 저장된 데이터를 불러 올 수 있음
     *      ex. 자동 로그인, 장바구니, ...
     *      => 브라우저를 닫더라도 데이터가 계속해서 저장되어있다. 
     * - session Storage : 브라우저 창이 종료되면 세션도 함께 종료되면서 데이터 소멸됨
     *      ex. 로그인 기록
     */

    const [localText, setLocalText] = useState('')
    const [localText2, setLocalText2] = useState('')
    const setLocal = ()=>{
        console.log('local storage 저장', localText);

        //로컬 스토리지에 저장하기
        localStorage.setItem('data', localText)
    }
    const getLocal = ()=>{
        //로컬 스토리지에서 데이터 꺼내오기
        setLocalText2(localStorage.getItem('data'))
    }

    const [sessionText, setSessionText] = useState('')
    const [sessionText2, setSessionText2] = useState('')
    const setSession = ()=>{
        console.log('session storage 저장', sessionText);
        sessionStorage.setItem('data', sessionText)
    }
    const getSession = ()=>{
        setSessionText2(sessionStorage.getItem('data'))
    }
    

  return (
    <div className='list-container'>
        <div>
        <h2>Local Storage : </h2>
        <input type="text" onChange={(e)=>{setLocalText(e.target.value)}}></input>
        <button onClick={setLocal}>저장</button>
        <button onClick={getLocal}>가져오기</button><br></br>
        {localText2}
        </div>

        <div>
        <h2>Session Storage : </h2>
        <input type="text" onChange={(e)=>{setSessionText(e.target.value)}}></input>
        <button onClick={setSession}>저장</button>
        <button onClick={getSession}>가져오기</button><br/>
        {sessionText2}
        </div>

        <div>
            {/* .clear() => 스토리지 초기화
            localStorage.clear()
            */}

            <button onClick={()=>{window.localStorage.removeItem('data')}}>local storage 삭제</button>
            <button onClick={()=>{window.sessionStorage.removeItem('data')}}>session storage 삭제</button>
        </div>
    </div>
  )
}

export default Storage