[React] 검색 조건 유지 - localStorage

여러 방법이 있겠지만 이번에는 localStorage 에 저장하는 방식을 이용했다. (블로그 참고)

 

1. 검색 시 저장

const onSubmit = () =>{
  // 검색조건유지
    setLocalStorage("searchCondition", inputs);
}

검색 버튼을 눌렀을때 검색 조건들을 searchCondtion 이란 이름으로 localStorage에 저장한다.

 

 

2. 값 초기화 시 저장된 값 삭제

const onErroronGetInvoiceList = () => {
    // 검색조건유지초기화
    localStorage.removeItem("searchCondition");
};

 

3. 검색조건 유지

  const searchCondition = getLocalStorage("searchCondition");
  
  useEffect(() => {
    if (searchCondition !== null) {
      setInputs({
        startDate: searchCondition?.startDate,
        endDate: searchCondition?.endDate,
        ...
      });
    }
  }, []);

(새로고침 시) => 처음 마운트 될 때 searchCondition 이 있다면 그 값을 inputs 의 state 값으로 변경해준다.

 

 

* setLocalStorage 함수와 getLocalStorage 함수

export const setLocalStorage = (key, value) => {
  const now = new Date();
  const ttl = 25200000;
  const item = {
    value: value,
    expiry: now.getTime() + ttl,
  };
  localStorage.setItem(key, JSON.stringify(item));
};

export const getLocalStorage = (key) => {
  const itemStr = localStorage.getItem(key);

  if (!itemStr) {
    return null;
  }

  const item = JSON.parse(itemStr);
  const now = new Date();

  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
};