localstorage

React : 최근 본 상품 만들기 (localStorage, map, JSON)

조건 useNavigate훅을 사용한 상세보기 페이지("/detail/:id"형태)에 접근하면 해당 상품의 id 번호를 최근 본 상품에 업데이트한다. 여기서 최근 본 상품은 항상 옆에 떠 있는 플로팅 박스이다. 풀이 App.js function App() { let getWatched = localStorage.getItem('watched'); ... useEffect(() => { // 로컬스토리지 'watched'가 존재하지 않을 때만 빈 배열을 생성 if (!getWatched)) { localStorage.setItem('watched', JSON.stringify([])); } }, []); ... return ( ... // getWatched가 존재하면 Watched 컴포넌트를 랜더링 //..

Level 3 : 9 장바구니버튼 구현하기(localStorage, array, forEach, JSON)

9. 장바구니 기능 만들기 조건 장바구니 버튼을 누르면 localStorage에 배열 형태로 상품이름이 담기고, cart.html을 따로 만들어 해당 html에 상품이 뿌려지도록 만들기 풀이 상품리스트 // 여러개의 장바구니 버튼들을 buttonCarts 변수로 선언 let buttonCarts = document.querySelectorAll('.btn-cart'); // buttonCarts 안의 각각의 buttonCart elements들에게 함수를 실행 buttonCarts.forEach(function(buttonCart){ // buttonCart를 클릭하면.. buttonCart.addEventListener('click', function(){ // localStorage의 cart를 ke..

[코딩애플] Local Storage 사용법 (Session Storage, IndexedDB, Cookies, Cache Storage)

브라우저 안에 유저 몰래 데이터를 저장할 수 있다. F12 개발자 도구에서 Application(애플리케이션) > Storage(저장용량) 카테고리를 보자. 1. Local Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 재접속해도 유지된다. 2. Session Storage key : value 형태로 데이터를 저장할 수 있다. 5MB 이하의 문자/숫자 데이터만 저장할 수 있다. (array, object 저장 불가능) 사이트를 나가면 삭제된다. 3. IndexedDB 구조화된 대용량데이터를 저장한다. 3. Cookies 유저의 인증정보(로그인정보 등)를 저장한다. 4. Cache..