现状:
用户请求http://localhost/#!/list/789(类别ID = 789的所有产品)
服务器发回index.jsp,在index.jsp中运行AngularJS东西,ngRoute看到“/#!/ list / 789”,AngularJS获取模板,ProductListController运行,执行GET请求,接收JSON格式的产品列表< / p>
浏览器地址栏中的网址更改为http://localhost/list/789
在此产品列表页面中,用户可以过滤页面中的产品,例如显示此价格范围内的所有产品,展示具有此颜色的产品,属于此品牌等,均使用JavaScript完成 问题是如果用户点击产品页面,例如localhost / show / 89并通过点击后退按钮返回,他们将再次看到产品列表页面,但他们的所有过滤器都将消失
是否有可能以某种方式保留“状态”,以便当用户返回时,将重新应用所有过滤器? 我认为这与历史pushState有关,但我如何在AngularJS中做到,是否可能?
我认为应该可以,因为在当前情况下,当浏览器地址栏中的URL发生变化时(从localhost /#!/ list / 789变为localhost / list / 789),浏览器不会发出任何请求服务器
因此,当用户应用过滤器时,URL可以更改为
localhost /#!/ list / 789?price = 50-100&amp; name = a或localhost /#!/ list789#price:50-100,name = a,但没有请求发送到服务器
用户进入产品页面,返回,他们将到达localhost /#!/ list / 789?price = 50-100&amp; name = a而不是localhost /#!/ list / 789
如何在AngularJS中执行此操作?
我知道这些解决方案:
- LocalStorage
- Cookies,即每次用户应用过滤器,浏览器通知服务器(嘿,用户只是应用价格过滤器),服务器保存在会话中
但是,首选维护浏览器历史记录中的状态,因为在应用每个过滤器时,会创建一个新URL,从而使用户能够撤消每个过滤器应用程序