项目中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后面的数据删除即是搜索页面。