重新加载后在状态中保留用户活动

我创建了一个应用程序，用户可以使用react和redux搜索与电影相关的信息。搜索用户可以应用一些过滤器（例如，持续时间）。我希望此过滤器处于活动状态，直到用户在用户重新加载页面后取消选择它们。重新加载后在状态中保留用户活动

问题： 当前场景用户应用过滤器应用程序将调度事件并将过滤器信息存储在Redux状态中。

但是，只要用户刷新关于过滤器的页面信息就会丢失。

解决方案尝试： 我曾尝试使用会话存储和本地存储一个解决办法，但我不相信有解决方案。

如果有人能解决这个问题，如果可以的话，这将是很好的。

来源

2016-09-15 cauchy

什么是与本地存储解决方案的问题？过滤器必须存储在某处***，并且某处要么是用户浏览器，要么是您的服务器 – Tyrsius

当我使用本地存储过滤器信息时，即使在关闭它之后，过滤器信息仍在浏览器中。为了避免我使用会话存储。还有一件事我没有发现使用会话存储有什么问题，但我想知道是否有更好的解决方案。 – cauchy

如果您不希望在浏览器关闭后存储它，那么会话存储或会话cookie是您的* only *解决方案。其他任何东西都会在浏览器关闭时生存下来 – Tyrsius

对于一些简单的状态，如过滤器的当前值，最好使用位置。

例如，您有以下页面：http://example.com/users。
然后你可以像这样保存过滤器：http://example.com/users?group=admin。

这种方法的好处很简单：您明确告诉用户页面的实际状态，他可以复制该页面，保存书签或发送给其他人。

要实现这一阵营的代码，你可以做以下的（我假设你有阵营路由器在你的应用程序）：

class UsersPage extends React.Component { 

    // should be called somewhere in onClick 
    filterUserGroup(groupName) { 
    this.props.router.push({ 
     pathname: this.props.location.pathname, 
     query: { 
      group: groupName 
     } 
    }); 
    } 

    componentWillReceiveProps(nextProps) { 
    if(nextProps.location !== this.props.location) { 
     //filter was changed, you can apply new filter value 
     this.setState({ 
      selectedGroup: nextProps.location.query.group 
     }); 
    } 
    } 

}

来源

2016-09-16 10:43:17

重新加载后在状态中保留用户活动

回答

相关问题