Как хранить даты, которые истекают через час в React?

Question

У меня есть приложение с указателем даты из библиотеки antd ui. Вопрос в том, чтобы хранить данные в течение часа после того, как они были выбраны с помощью DatePicker. Пожалуйста, помогите мне реализовать это с React.

Я хочу, чтобы браузер сохранил его, даже если я закрою вкладку и завершу сеанс. И важно, что я держу это на фронте без сервера. Я знаю о 3 способах:

• localalstorage,
• sessionstorage
• cookies.

Возможно, sessionstorage не годится. Cookie в порядке, и у localalstorage нет механизма истечения срока действия. Cookie, вероятно, должен быть установлен без библиотек. Я думаю, что так и происходит

componentDidMount(){
   document.cookie = "rememberDates=true; expires=3600000";
}

Answer 1

Нет ничего конкретного для библиотеки React, которая предназначена для хранения данных в браузере, для этого вам придется использовать API-интерфейсы браузера. Лучше всего использовать cookie-файл.

Предполагая, что ваша дата хранится в объекте Javascript Date, вот начало того, что я хотел бы сделать:

// saves the date value as a string to a cookie called savedDate
function writeDateCookie(date) {
  document.cookie = `savedDate=${date.toString()}; max-age=3600`;
}

// loads the date object from the savedDate cookie
// returns the date as a string or null if it does not exist
// can be converted back to date with new Date(dateString)
function getDateCookie() {
  const cookieObj = Object.fromEntries(
    document.cookie.split("; ").map(c => {
      const [key, ...v] = c.split("=");
      return [key, v.join("=")];
    })
  );
  return cookieObj.savedDate ? cookieObj.savedDate : null;
}

Answer 2

если вам нужно решение с избыточностью, вы можете изменить свойство начального состояния для объекта и добавить свойство срока действия следующим образом.

const initialState = {
    someProperty: {
        value: '',
        expirationDate: ''
    }
}

, и при отправке действия вы можете передать объект как со значением свойства, так и с эксп. дата как

dispatch({
    type: 'ADD_FOO',
    payload: {
        value: 'bar',
        expirationDate: 1000 //ms (1sec) 
    }
})

и в вашем редукторе вы можете просто

 if(action.type === 'ADD_FOO'){
     return ...state, someProperty: action.payload 
 }

и, наконец, когда вам нужно проверить срок действия, вам нужно проверять каждый раз, когда вы будете получать эти данные из хранилища, если срок действия истекdate больше чем date.now, например, так: new Date(someProperty.expirationDate).getTime() < Date.now(), и отправьте новое действие, которое удаляет это свойство, или вы можете добавить третье свойство в someProperty (в initialState) с именем expired: false, и действие отправки для изменения истекло с false на true. этот подход трудно поддерживать, и вы, вероятно, получите ошибку, поэтому я бы выбрал подход с использованием файлов cookie.