现在已实现基本的2个html页面:
首页查询页,会在输入框输入内容,点击查询,列出查询结果,点击后进入
![](https://www.crifan.com/files/pic/uploads/2021/05/fb2435d262f44ec695f49b10c06726c2.jpg)
详情页,显示详情,可以点击左上角返回:
![](https://www.crifan.com/files/pic/uploads/2021/05/0a7f38b3742f441baf69481e1affce63.jpg)
现在返回首页时是空的:
![](https://www.crifan.com/files/pic/uploads/2021/05/de001ad0b9754532b068155ea1662986.jpg)
希望实现:
能保持之前的数据:
输入的查询内容,以及搜索出结果
另外注意到:
手机的微信中,用取消键返回,不是点击左上角返回按钮,则是可以保留输入框的内容的:
![](https://www.crifan.com/files/pic/uploads/2021/05/7ec4de315e2341e1833175f71b43069f.jpg)
所以这两种方式,最好都支持,能接着自动查询,省去用户手动点击
【总结】
最后是用了localStorage,保存,删除,恢复
代码是:
js/main.js
console.log("restoreInputAndSearch") var curInputValue = $("#inputQuery").val() console.log("curInputValue=%s", curInputValue) if (curInputValue){ ajaxSubmitQuery() } else { var preSavedInput = restoreInput() console.log("preSavedInput=%s", preSavedInput) if (preSavedInput) { $("#inputQuery").val(preSavedInput) console.log("Have restored previous saved search input value: %s", preSavedInput) ajaxSubmitQuery() } } } restoreInputAndSearch() ... $('.form-clear').on('click', function() { $(this).addClass('d-none').prevAll(':input').val(''); console.log("has clear input") clearInput() }); function ajaxSubmitQuery() { ... storeInput(trimedQuery)
js/book_common.js
const LastSearchInputStoreKey = "last_search_input" function storeInput(inputStr){ console.log("storeInput: inputStr=%s", inputStr) localStorage.setItem(LastSearchInputStoreKey, inputStr) } function restoreInput(){ var savedSearchInput = localStorage.getItem(LastSearchInputStoreKey) console.log("savedSearchInput=", savedSearchInput) return savedSearchInput } function clearInput(){ localStorage.removeItem(LastSearchInputStoreKey) }
效果是:
当输入内容点击查询后,可以保存输入内容到localStorage:
![](https://www.crifan.com/files/pic/uploads/2021/05/481db7d71aa940e4a4999a43bf631607.jpg)
当进入下一页再返回时,localStorage的值还是在的:
![](https://www.crifan.com/files/pic/uploads/2021/05/c58ddc242fcc4550b21cb18aabfc5789.jpg)
然后点击详情页中的返回按钮或点击 浏览器的返回:
![](https://www.crifan.com/files/pic/uploads/2021/05/52b0a51183a44817b79d509c5d2f2b36.jpg)
然后主页中由于可以检测到 输入框中已经有了内容,所以会触发搜索:
![](https://www.crifan.com/files/pic/uploads/2021/05/10705ff45b964877954202ea04871926.jpg)
或者从保存的输入恢复出来,也是类似逻辑:
![](https://www.crifan.com/files/pic/uploads/2021/05/64217ae6ef954eae975be87c8b78d7b2.jpg)
转载请注明:在路上 » 【已解决】html中返回上一页时保存之前的数据