localStorage & sessionStorage

이번에는 로컬스토리지, 세션스토리지에 로직 처리를 위한 utils 공통 함수를 만들었습니다.

productStorageControl 파일의 경우 명칭 그대로 상품 스토리지 관리를 위한 함수 모음으로 상품목록 화면에서 상품 상세 화면으로 이동하게 될 경우 상품 이력들을 하나의 배열 형태로 로컬 스토리지 또는 세션스토리지에 저장하도록 하는 로직입니다.

Storage 선택

우선 고민했던 부분은 SessionStorage 또는 LocalStorage 사용해서 이력을 관리를 할 경우 어떤 스토리지를 통해 관리하도록 할지에 대한 고민이었습니다.

세션스토리지의 경우 브라우저에 나가게 될 경우 자동으로 삭제가 되고 로컬스토리지의 경우 브라우저가 종료된다 하더라도 계속 남아있는 스토리지 입니다.

구현하려던 목록중에 00시 기준으로 최근 조회이력과 관심 없는 상품목록 초기화 부분이 있어서 세션스토리지를 선택할까 했지만 하지만? 선택은 로컬스토리지로 하였습니다.

세션스토리지의 경우 브라우저 종료시 사라진다고 하지만 결국 브라우저가 켜져있을 경우 삭제하는 부분이 존재하고 브라우저가 종료된다 하더라도 그날 하루동안은 다시 들어갔을 경우 내가 봤던 내역들에 대해 남아있는게 좋을거 같다는 생각에서 선택했습니다.

로컬 스토리지 저장

// 로컬스토리지 저장
export const NO_INTERRESTED = 'no_Interested';
export const WATCH = 'watch';
export const RESET_DATE = new Date();

export const setLocalStorageProducts = (watch, product) => {
  const initStorage = JSON.parse(localStorage[watch] || '[]');
  const storage = Array.isArray(initStorage) ? initStorage : [];
  const findProduct = storage.some(el => el.id === product.id);
  
  const date = getFormatDate(RESET_DATE, 'YYYYMMDDHHMISS');
  const data = {...product, date};

  const items = storage.map(el => (el.id === product.id ? data : el))

  if (!findProduct) items.push(data);

  localStorage[watch] = JSON.stringify(items);
};

// 받아온 일자 특정 형식으로 반환
export const getFormatDate = (date, format) => {
    const yy = date.getFullYear();
    const mm = formatdigit(date.getMonth() + 1, 2);
    const dd = formatdigit(date.getDate(), 2);
    const hh = formatdigit(date.getHours(), 2);
    const mi = formatdigit(date.getMinutes(), 2);
    const ss = formatdigit(date.getSeconds(), 2);

    if (format.toUpperCase() === 'YYYY-MM-DD') {
      return `${yy}-${mm}-${dd}`;
    }
    if (format.toUpperCase() === 'YYYYMMDDHHMISS') {
      return `${yy}${mm}${dd}${hh}${mi}${ss}`;
    }
  };

// 숫자의 길이를 확인하여 0을 앞자리에 붙여주는 함수
export const formatdigit = (number, len) => {
  const str = number.toString()
  return str.length >= len ? str : new Array(len-str.length+1).join('0')+ str;
};

해당 부분은 로컬 스토리지 저장부분으로 현재 저장하고자 하는 상품의 로컬스토리지 key 값을 WATCH 라는 상수를 통해 제공하여 명칭이 변경되었을 경우 쉽게 추가 및 변경이 가능하도록 하였고 상품의 객체를 받아와 기존 스토리지에 저장된 내역이 있는지 확인하여 상품의 id값을 통해 비교하여 현재 일자를 추가하여 로컬스토리지에 저장하도록 하였습니다.

return ? []

export const getLocalStorageProducts = watch => {
  resetLocalStorageProducts(watch, getFormatDate(RESET_DATE, 'YYYYMMDDHHMISS'));

  const initStorage = JSON.parse(localStorage[watch] || '[]');
  return Array.isArray(initStorage) ? initStorage : [];
};

배열로 저장된 데이터를 확인 후 반환하는 부분입니다.
기존 데이터가 있다고 하면 해당 배열 형태를 없을 경우 빈 배열을 반환합니다.

특정일자 기준 제거

위에는 resetLocalStorageProducts 함수가 존재합니다.
해당 함수는 로컬스토리지에 저장된 상품의 목록을 초기화 해주는 부분으로
일자 기준에 따라 초기화 하도록 되어있습니다.

export const resetLocalStorageProducts = (watch, date) => {
  const initStorage = JSON.parse(localStorage[watch] || '[]');
  const storage = Array.isArray(initStorage) ? initStorage : [];
  const products = storage.filter(el => el.date.slice(0, 8) === date.slice(0, 8));
  localStorage[watch] = JSON.stringify(products);
}

해당 로직은 인자로 받는 기준일자와 로컬스토리지에 저장되어있는 일자가 다를 경우 삭제하도록 되어있어 현재일자를 보낼 경우 금일자 데이터가 아닌 경우 초기화 합니다.

관심상품 & 최근상품

로컬스토리지에는 최근 본 상품 내역만 저장하는것이 아닌 관심없는 상품일 경우 따로 저장하도록 되어있습니다. (타이틀은 관심상품이지만 실제는 관심없는 상품 😅😅😅)

export const getFilterLocalStorageInterestedProducts = (products, product) => {
  const noInterestedProducts = getLocalStorageProducts(NO_INTERRESTED);
  if (product) noInterestedProducts.push(product);

  const noInterestedProductIdArrary = noInterestedProducts.map(el => el.id);

  return products.filter(el => !noInterestedProductIdArrary.includes(el.id))
}

위 함수를 보게 되면 관심없는 상품을 등록했을 경우 기준이 되는 전체 상품 리스트 products 인자와 비교하여 저장되어있는 리스트 중 관심없는 상품의 id값을 가져와 해당 id값을 가진 배열 noInterestedProductIdArrary 을 만들어 포함되어있는지 확인하여 포함되지 않는 항목들만 반환하도록 하였습니다.