摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢
项目中localStorage实用
项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage.
此需求是一贴吧搜索页,在新用户第一次点击搜索框时为搜索页面,老用户点击搜索框时带有搜索记录,实现方法为在点击搜索按钮时便为用户创建一个本地存储localStorage user-data,判断当页面中含有user-data时便将搜索框的val追加进user-data中,以“|”隔开,若user-data不存在便创建user-data。
var storage=window.localStorage; if(storage.getItem("user-data")){ var str=storage.getItem("user-data"); storage.setItem("user-data",str+"|"+$("#keyword").val()); }else{ storage.setItem("user-data",$("#keyword").val()); }
当页面加载时若本地localStorage中含有user-data,则获取此数据,返回为字符串,用split方法以“|”为判断条件将此字符串切割为数组,并循环创建,导入页面编辑器中,即:
if($(".search-con") && !findKey("keyWords")){ var html=""; if(window.localStorage && localStorage.getItem("user-data")){ var data=localStorage.getItem("user-data").split("|"); for(var i=data.length-1;i>=0;i--){ html+=""+data[i]+"" } $(".user-clear").show(); }else{ html="
未搜索任何信息" } $(".search-con").html(html); }
其中findKey()方法为判断路径中是否含有搜索关键字keyWords,需求是当含有搜索关键字时显示为搜索结果,无需关注。
function findKey(name){ var str=window.location.href; return str.indexOf(name)==-1?false:true; }
点击清除搜索记录时清除user-data,即:
localStorage.removeItem("user-data");
点击搜索时将搜索框val拼入路径,页面刷新获取后台数据,减少ajax请求,search.html为相对路径,即是当前文件名即可:
window.location.href="search.html?keyWords="+encodeURI($("#keyword").val());
实现此需求只需后端一个页面即可(我们后端为asp.net),贴出完整测试代码:
论坛搜索 清除搜索记录
直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有keyWords则为测试数据,将.html后面的数据删除即是搜索页面。
若有疑问或错误,请多多交流,谢谢~~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50259.html
摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢 项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索...
摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢 项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索...
摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢 项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索...
阅读 2471·2021-09-24 10:29
阅读 3777·2021-09-22 15:46
阅读 2550·2021-09-04 16:41
阅读 2960·2019-08-30 15:53
阅读 1238·2019-08-30 14:24
阅读 3023·2019-08-30 13:19
阅读 2135·2019-08-29 14:17
阅读 3486·2019-08-29 12:55