在我基于 React 的单页应用程序中,我的页面分为两个窗格。
左窗格:过滤器面板。
右窗格:网格(包含通过应用过滤器的数据的表格)
总之,我有一个与 amazon.com 非常相似的应用程序。默认情况下,当用户在浏览器中点击应用程序的根端点 (/) 时,我会从服务器获取过去 7 天的数据并将其显示在网格中。
过滤器面板有几个过滤器(例如时间过滤器来获取落在指定时间间隔内的数据,ID 来搜索具有特定 id 的数据等)和一个附加在过滤器面板标题中的搜索按钮。点击搜索按钮通过在帖子表单正文中提供选定的过滤器来对服务器进行帖子调用,服务器返回与传递的过滤器匹配的数据,我的前端应用程序显示从网格内的服务器返回的数据。
现在,当有人点击过滤器面板中的搜索按钮时,我想在 URL 的查询参数中反映选定的过滤器,因为这将帮助我与我网站的其他用户共享这些 URL,以便他们可以看到我应用的过滤器和仅查看与这些过滤器匹配的网格内的数据。
这里的问题是,如果在搜索按钮单击时,我使用带有查询参数的 http get,由于不同浏览器对 URL 长度的限制,我最终会破坏应用程序。
请建议我创建此类 URL 的正确解决方案,这将帮助我在过滤器面板中设置选定的过滤器,而不会对我的应用程序造成任何副作用。
可能的解决方案:考虑到由于不同浏览器的URL长度限制,我们不能直接在查询参数中添加纯字符串(注:规范不限制HTTP Get请求的长度,但不同浏览器实现了自己的限制),我们可以使用诸如消息摘要或哈希之类的东西(将任意长度的输入转换为固定长度的输出)并将其保存在数据库中,以便服务器理解请求并返回内容。这只是一个想法,我不确定这是否是这个问题的理想解决方案。
其他频繁使用的网站的行为:
- amazon.com, newegg.com ->使用散列网址。
- kayak.com ->因为他们有很好定义的关键字,所以他们使用简短的形式,如 INDIA 表示 INDIA,BLR 表示 Bangalore 等,并将其与否定逻辑相结合,以进一步优化最大 url 长度。未选中,但理想情况下会在大量选择过滤器后中断。
- flipkart.com ->将字符串直接附加到查询参数并在超出限制后中断。验证了这一点。