localStarage 만료시간 설정하기

Object로 value와 expireTime을 저장합니다.

// 만료 시간과 함께 데이터를 저장

const setItemWithExpireTime = (

  keyName: string,

  keyValue: string,

  expireTime: number,

) => {

  const obj = {

    value: keyValue,

    expire: Date.now() + expireTime,

  };

  const objString = JSON.stringify(obj);

  // eslint-disable-next-line

  window.localStorage.setItem(keyName, objString);

};

'recentViewed' key에 데이터를 12시간동안 저장합니다.

 

  // 리듀서에 있는 최근 조회 데이터를 localStorage에 저장하기

  useEffect(() => {

    if (recentViewedItems.length) {

      setItemWithExpireTime(

        'recentViewed',

        JSON.stringify(recentViewedItems),

        1000 * 60 * 60 * 12,

      );

    }

  }, [recentViewedItems]);

key에 해당하는 값이 있다면 만료되었는지 확인합니다.

// 만료 시간을 체크하며 데이터 읽기

const getItemWithExpireTime = (keyName: string) => {

  // eslint-disable-next-line

  const objString = window.localStorage.getItem(keyName);

  if (!objString) {

    return null;

  }

  const obj = JSON.parse(objString);

  if (Date.now() > obj.expire) {

    // eslint-disable-next-line

    window.localStorage.removeItem(keyName);

    return null;

  }

  return obj.value;

};

 

컴포넌트 로드 시 로컬에서 불러온 데이터가 존재한다면 reducer에 저장합니다.

  // 로컬로부터 최근 조회 불러오기

  useEffect(() => {

    const itemsFromLocalStorage = getItemWithExpireTime('recentViewed');

    if (itemsFromLocalStorage) {

      const filteredItemsFromLocalStorage = itemsFromLocalStorage.filter(

        (item: null | ProductPostsObject[]) => item != null,

      );

      dispatch(addItemToRecentViewedItems(filteredItemsFromLocalStorage));

    }

  }, []);