LocalStorage로 최근 본 상품 기능 만들기

쇼핑몰 프로젝트에서 가장 대표적인 기능 중 하나인, 최근 본 상품 기능을 만들기 위해 LocalStorage와 Set을 활용했습니다.

 

📌LocalStorage 활용법

• LocalStorage에 값은 항상 문자열만 저장 가능하고, 값을 넣을 때 key: value 형태를 가집니다.
• LocalStorage에 값을 넣는 법: localStorage.setItem('key', 'value');
• LocalStorage에 값을 가져오는 법: localStorage.getItem('key');
• LocalStorage에 값을 삭제하는 법: localStorage.removeItem('key');

 

📌Set 활용법

• Set은 대부분 중복없이 저장하고 싶을 때 자주 사용됩니다.
• Set으로 배열의 중복 없애는 법: new Set(array)

 

// LocalStorage에는 key로 'recent'이고 value에는 '[]'로 초기화되어 있습니다.
let recent = JSON.parse(localStorage.getItem('recent'));

// 객체 형태로 이미지와 해당 상품의 url을 저장합니다.
recent.push({img: item.mainImg[0].img, url: item.url});

// 중복된 값을 Set으로 없애준 뒤 배열로 저장합니다.
let result = [...new Set(recent)];

// 수정된 배열을 다시 'recent'로 LocalStorage에 저장합니다.
localStorage.setItem('recent', JSON.stringify(result));

 

 

📌결과

1. LocalStorage의 변화

LocalStorage의 처음과 LocalStorage에 최근 본 상품이 저장된 변화

 

2. 화면

최근 본 상품의 정보가 저장되기 전과 후 화면