Local Storage와 Session Storage의 차이
Local Storage : 브라우저 청소를 하지 않으면 무한히 저장됨
Session Storage : 브라우저 끄면 날라감
공통점( 5MB정도의 Text만 저장 가능함)

새로고침해도 모든 state데이터는 리셋된다.
왜냐하면 새로고침할 경우 JS파일들을 첨부터 다시 읽기 때문이다.
그러면 장바구니에 추가했던 항목들도 모두 default로 리셋되버린다.
이게 싫다면 state데이터를 DB로 저장하고나 아직 서버나 DB지식이 없으면 localStorage에 저장하면 된다.
-> 브라우저에 정보를 저장하고 싶을 때 쓴다.

사이트마다 5MB 정도의 텍스트, 숫자 데이터를 저장할 수 있다.
유저가 브라우저를 청소하지 않는 이상 그대로 남아있게 된다.

localStorage에 object자료를 그냥 저장하면 깨진다

배열을 넣으면 배열이 없어진다
localstorage와 sessionstorage에는 문자나 숫자만 저장 가능하기 때문
해결하려면?

• 모든걸 다 따옴표 쳐서 JSON으로 만들면 됨.
  손수 다 치는게 아니고 이 문법을 치면 된다.

JSON.stringify

꺼내쓸때는 JSON.parse

localStorage 문법

localStorage에 객체나 배열을 저장하려면 '문자화' 작업을 거쳐야한다.
왜냐면 localStorage는 텍스트 자료만 저장가능하기 때문이다.

JSON.stringify() 함수에 obj 또는 arr를 집어 넣어주면 문자처럼 인식할 수 있는 JSON자료로 바꿔준다.
예를들어 아래의 코드는 이런식으로 바꿔준다.

localStorage.setItem('obj', JSON.stringify({name:'kim'}) );
-> {"name" : "kim"}

이제서야 문제없이 localStorage에 저장가능하다. 문자화를 안시켜주면 정확한 값이 아닌 의미 없는 값이 들어갈 것이다.

데이터를 다시 꺼내 쓸 땐 어떻게 해?

위와 같이 저장을 했으면 '역문자ㅇㅇ
팁) 한글로 쭉 정리해놓고 시작하는게 아주 좋은 습관. 버그같은게 생길 수 없다.
1. Detail.js로 들어가면
2. localStorage에 있는 데이터를 꺼냅니다.
3. 그럼 [0,1] 이런게 담긴 어레이가 나오겠죠
4. 그럼 거기에 현재 페이지에 있는 상품번호를 push합니다. //[0,1,1]이런식이 되겠죠
5. 중복 숫자를 제거합니다. (Set자료형 참고)
6. 중복 제거된 [] 어레이를 다시 localStorage에 저장합니다.

useEffect(() => {
    //useEffect : 마운트, 렌더링될 떄 실행
    let arr = localStorage.getItem("watched");

    if (arr == null) {
      // 페이지로 첫진입했을 땐, locatstorage에 아무것도 없는상태이기 때문에 빈배열을 하나 만듬.
      arr = [];
    } else {
      arr = JSON.parse(arr); // 따옴표가 쳐져있는 json 형식을 되돌려놓기위해
    }

    arr.push(id); // useParams()
    arr = new Set(arr); // 중복된 것을 제거해주는 js문법
    arr = [...arr]; // 위에 만들어 놓은 set자료형을 조작하기 쉬운 array로 만듬
    localStorage.setItem("watched", JSON.stringify(arr));
  }, []);