资讯专栏INFORMATION COLUMN

JavaScript_Html5_LocalStorage项目demo

BlackHole1 / 1998人阅读

摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢

项目中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

相关文章

  • JavaScript_Html5_LocalStorage项目demo

    摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢 项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索...

    Pink 评论0 收藏0
  • JavaScript_Html5_LocalStorage项目demo

    摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢 项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索...

    Magicer 评论0 收藏0
  • JavaScript_Html5_LocalStorage项目demo

    摘要:正在加载,请稍后滑动加载更多没有更多内容了。。直接复制到本地便可测试,调试状态为移动端效果更佳,如果路径中含有则为测试数据,将后面的数据删除即是搜索页面。若有疑问或错误,请多多交流,谢谢 项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索...

    Loong_T 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<