JavaScript_Html5_LocalStorage项目demo

Loong_T 发布于2019-08-26 11:27 / 371人阅读

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

项目中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/107001.html

JavaScript_Html5_LocalStorage项目demo

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

Pink 2019-08-22 11:02 评论0 收藏0
JavaScript_Html5_LocalStorage项目demo

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

Magicer 2019-08-21 14:52 评论0 收藏0
JavaScript_Html5_LocalStorage项目demo

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

BlackHole1 2019-08-01 16:03 评论0 收藏0