Reactjs 如何在React中存储一小时后过期的日期？

我有一个来自antd ui库的带有日期选择器的应用程序。问题是在使用datepicker选择数据后，将其保留一小时。请帮助我用React实现这一点

我希望即使我关闭选项卡并完成会话，浏览器也能保留它。重要的是，我把它放在没有服务器的前端。我知道三种方法：

本地存储， 会话存储 饼干。 可能会话存储不好。Cookie正常，localstorage没有过期机制。 Cookie可能必须设置为不带LIB。 我想是这样的

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

---

React库没有专门用于帮助在浏览器中存储数据的功能，因此必须使用浏览器API。使用饼干可能是你最好的选择

假设您的日期存储在Javascript日期对象中，下面是我要做的一个开始：

//将日期值作为字符串保存到名为savedDate的cookie中 函数writeDateCookiedate{ document.cookie=`savedDate=${date.toString}；最大年龄=3600`； } //从savedDate cookie加载日期对象 //以字符串形式返回日期，如果不存在，则返回null //可以使用新的DateString转换回日期 函数getDateCookie{ const cookieObj=Object.fromEntries document.cookie.split；.mapc=>{ 常数[key，…v]=c.split=； return[key，v.join=]； } ; 返回cookieObj.savedDate | | null； }

---

React库没有专门用于帮助在浏览器中存储数据的功能，因此必须使用浏览器API。使用饼干可能是你最好的选择

假设您的日期存储在Javascript日期对象中，下面是我要做的一个开始：

//将日期值作为字符串保存到名为savedDate的cookie中 函数writeDateCookiedate{ document.cookie=`savedDate=${date.toString}；最大年龄=3600`； } //从savedDate cookie加载日期对象 //以字符串形式返回日期，如果不存在，则返回null //可以使用新的DateString转换回日期 函数getDateCookie{ const cookieObj=Object.fromEntries document.cookie.split；.mapc=>{ 常数[key，…v]=c.split=； return[key，v.join=]； } ; 返回cookieObj.savedDate | | null； }

---

若您需要redux解决方案，您可以将初始状态的属性修改为object，并像这样添加expiration属性

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

在动作分派中，您可以传递属性值和exp.date都为的对象，如

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

在你的减速器里你可以

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

---

最后，当您需要检查过期时间时，您需要在每次从存储中获取此数据时进行检查，如果过期日期大于日期。现在，如下所示：new DatesomeProperty.expirationDate.getTime如果您需要redux解决方案，您可以将初始状态的属性修改为object，并像这样添加expiration属性

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

在动作分派中，您可以传递属性值和exp.date都为的对象，如

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

在你的减速器里你可以

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

---

最后，当您需要检查过期时间时，您需要在每次从存储中获取此数据时进行检查，如果过期日期大于日期。现在，如下所示：new DatesomeProperty.expirationDate.getTime您的cookie方法有什么问题吗？我想知道如何读取cookie以及如何建立过期检查机制。我还想知道经验丰富的开发者如何解决这个问题。可能有人在反应中使用了cookiespa@kilogram当您添加到期日期时，它将自动到期。要检查它是否存在，您只需检索cookie并使用simple if else statmenetyeah检查cookie是否存在。我已经阅读了有关检查cookie存在的内容感谢您的cookie方法有何错误？我想知道如何读取cookie以及如何建立过期检查机制。我还感兴趣的是经验丰富的react开发人员如何解决此问题。可能有人在反应中使用了cookiespa@kilogram当您添加到期日期时，它将自动到期。要检查它是否存在，您只需要检索cookie并使用simple if else statmenetyeah检查它是否存在。我已经读过关于检查cookie是否存在的内容。谢谢。如果这不是您想要的方向，请告诉我这是一个有趣的解决方案。如果您只需在componentDidMount生命周期方法中调用getDateCookie函数和writeDateCookie函数，那么这是一个非常好的解决方案

---

无论何时更新日期，它都会做出正式反应。如果这不是您希望的方向，请告诉我这是一个有趣的解决方案。优秀的香草js解决方案如果您只需在componentDidMount生命周期方法中调用getDateCookie函数，并在日期更新时调用writeDateCookie函数，它将得到正式响应这是一件有趣的事情。但它需要调度操作获取。在安静模式下它不会工作。应用程序将保持不变，不知道cookie过期。每次我需要检查cookie时，你都必须启动redux机器。如果你是正确的，它只会在你获取数据时注意到过期。不幸的是，据我所知，这是使用redux实现过期检查的唯一方法，因为我承认使用cookie更好。我感谢您尝试使用redux进行过期检查谢谢！希望这有助于理解这不是最好的方法，这是一件有趣的事情。但它需要调度操作获取。在安静模式下它不会工作。应用程序将保持不变，不知道cookie过期。每次我需要检查cookie时，你都必须启动redux机器。如果你是正确的，它只会在你获取数据时注意到过期。不幸的是，据我所知，这是使用redux实现过期检查的唯一方法，因为我承认使用cookie更好。我感谢您尝试使用redux进行过期检查谢谢！希望有助于理解这不是最好的方法LOL