React - localStorage

새로고침하면 모든 state 데이터는 리셋됩니다. 왜냐하면 새로고침을 하면 브라우저는 html css js파일들을 처음부터 다시 읽기 때문입니다. 

이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하거나 하면 됩니다.

서버나 DB가 없다면 localStorage를 이용해도 됩니다. 

 

크롬개발자도구에서 Application 탭에 들어가면 볼 수 있습니다. 

• 사이트마다 5MB정도의 문자 데이터를 저장할 수 있습니다.
• object 자료랑 비슷하게 key/value 형태로 저장합니다. 

유저가 브라우저를 청소하지 않은이상 영구적으로 남아있습니다. 

 

 

localStorage 문법

js파일 아무데서나 다음 문법을 쓰면 로컬스토리지에 데이터 입출력할 수 있습니다. 

차례대로 추가,읽기,삭제 문법입니다. 

localStorage.setItem('데이터이름', '데이터');
localStorage.getItem('데이터이름');
localStorage.removeItem('데이터이름')

 

 

 

localStorage에 array/object 자료저장

문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수는 없습니다.

그래서 array/object -> JSON 이렇게 변환해서 저장하면 됩니다. 

JSON은 문자취급을 받아서 그렇습니다. 

localStorage.setItem('data', JSON.stringify({name:'kim'}) );

JSON.stringify()라는 함수에 array/object를 집어넣으면 그 자리에 JSON으로 변환된걸 남겨줍니다. 

 

당연히 꺼내면 JSON이 나옵니다. 

JSON -> array/object 변환하고 싶으면 

JSON.parse()를 쓰면됩니다. 

var a = localStorage.getItem('obj');
var b = JSON.parse(a)
console.log(a);
console.log(b);

parse로 변환하면 아래결과처럼 잘 나옵니다. 

 

 

최근 본 상품 UI기능 만들기

일단 먼저 상세페이지를 들어가면 현재 페이지에 있는 상품 ID를 localStorage에 저장되게 만듭니다.

그래서 상세페이지에 useEffecet안에 다음과 같은 한글을 코드로 작성합니다.

1. 누가 Detail페이지 접속하면 -> useEffect 

2. 현재 페이지에 보이는 상품id 가져와서 -> 이전에사용했던 props.값이용

3. localStorage에 watch항목에 있던 [ ] 에 추가 -> localStorage의 값에 직접 추가할 수 없기 때문에 parse로 변환한다음 push값을 추가한다음 다시 JSON으로 변환해준뒤 추가해줍니다. 

useEffect(()=>{
    setTimeout(()=>{ setFade('end') },100)
    let output = localStorage.getItem('watched');
    output = JSON.parse(output)
    
    output.push(props.shoes[id].id);
    
    localStorage.setItem('watched', JSON.stringify(output));
    return()=>{
      setFade('')
    }
  }, [])

처음 접속했을때 아무 값도 들어가있지 않습니다.

상세페이지를 다 들어간뒤 다시보면 값이 잘 들어갑니다. 

 

문제가 하나 더남았습니다. 바로 중복된 값입니다. 

중복된 값을 제거하려면 다음과 같이 코드를 작성합니다.

아래처럼 set을 이용해서 중복을 제거 해줘도 되고 

let output = localStorage.getItem('watched');
output = JSON.parse(output)
output.push(props.shoes[id].id);
output = new Set(output)
output = Array.from(output)
localStorage.setItem('watched', JSON.stringify(output))

아래처럼 map을 이용해서 값이 있는지 없는지 체크해주면 됩니다.

 output.map((a,index)=>{
    if(a==props.shoes[id].id)
      {
        check=true;
      }
    })
    if(check==false)
    {
      output.push(props.shoes[id].id);
      localStorage.setItem('watched', JSON.stringify(output));
    }

 

 

localStorage에 state를 자동저장되게 만들고 싶으면

직접 코드를짜도 되지만

redux-persist이런 라이브러리를 설치해서 쓰면 redux store 안에 있는 state를 자동으로

localStorage에 저장해줍니다. state 변경될 때마다 그에 맞게 localStorage 업데이트도 알아서 해줍니다. 

그래서 요즘 신규 사이트들은 Redux 대신 Jotai, Zustand같은 라이브러리를 사용합니다. 

 

 

응용

1. 새로고침시 localStorage에 있던 항목도 [] 비워지는 현상 

App() 메인페이지가 실행될때 useEffect를 써서 최근본상품의 id를 저장할 수 있게 watched라는 배열을 만들어줬었습니다. watched는 메인페이지가 새로고침될때 다시 빈배열로 생성되었습니다.

따라서 getItem으로 watched를 꺼내보았는데 [] 값이 나왔습니다. 

이상한값(존재하지않는) 예를들면 asd를 꺼냈을때는 null이 나왔습니다. 

따라서 watched라는 키를 꺼냈는데 null이면 생성해주도록 하였습니다. 

function App() {

  useEffect(()=>{
    let temp = localStorage.getItem('watched');
    if(temp==null)
    {
      localStorage.setItem('watched', JSON.stringify([]))
    }
    
  },[])

 

결과입니다. 오른쪽 로컬스토리지의 값을 보면 새로고침해도 사라지지가 않습니다. 

2. localStorage에 저장된 데이터 응용해서출력