使用localStorage将搜索商品的记录保存在本地
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用localStorage将搜索商品的记录保存在本地相关的知识，希望对你有一定的参考价值。
项目需求:
1.将用户搜索商品的记录保存在本地，形成历史搜索记录
2.如果本地有历史搜索记录就显示，如果没有则隐藏
3.在input中输入内容，点击按钮进行搜索，要同时在本地保存历史搜索记录
所遇倒的问题：
1.在APP中保存历史搜索记录是没有问题的，但是如果在用户切换账号之后有可能共享历史记录，
解决办法：取到用户ID， window.localStorage.setItem("record"+userID,recordArr); 根据用户ID生成不同的本地存储key值，
那么取值的时候也是一样，这样就不会造成历史记录共享了。
2.第一个问题解决后有第二个问题，用户的搜索记录是多条的，所以当时想到用数组来存储，但是本地只能保存字符串，就算用数组，取出来的值还是以长字符串显示
解决办法：还是以数组的形式保存，取值的时候对字符串进行操作，以逗号进行分割形成新的数组，然后进行循环显示
3.保存历史搜索数据。分为两种情况，第一种是有数据的存储，第二种是在有数据的时候新增数据
解决办法：为了防止冲突，最好是使用两个数组进行存储，一个空数组和一个操作字符串形成的新的数组
以下为页面代码，不提供CSS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>搜索商品记录存储在本地</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" href="css/search_goods.css" />
<script src="js/flexible.debug.js"></script>
<script src="js/flexible_css.debug.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div class="app" style="display:block;">
<!--搜索框-->
<div class="nav">
<div class="navL fl">
<i></i>
<input type="text" placeholder="输入您想找的商品" class="record_input">
</div>
<div class="navR fl">
<button class="record_btn">搜索</button>
</div>
</div>
<div class="hot_history" style="display: block;">
<!--搜索历史-->
<div class="history" style="display: block;">
<p class="history_tit">搜索历史</p>
<ul class="history_list">
<!--搜索历史循环列表-->
<li class="whole" style="display:none;">全部搜索记录</li>
<li class="close_whole" style="display:none;">清除搜索记录</li>
</ul>
</div>
</div>
<div class="hidden" style="display: none;">10</div>
</div>
<!--数据加载失败-->
<div class="fail" style="display: none;">
<img src="img/Network.png">
<p class="result">数据加载失败，可能网络异常</p>
<button class="F5">刷新</button>
</div>
<script>
$(window).ready(function(){
var userID=$(‘.hidden‘).html();//取得ID
var getRecord=window.localStorage.getItem("record"+userID);//根据用户ID取到记录
var recordArr=[];
var recordArr2=[];
console.log(getRecord);
if(getRecord==null){
$(‘.history‘).css(‘display‘,‘none‘);
//向本地添加记录
$(‘.record_btn‘).click(function(){
recordArr.push($(‘.record_input‘).val());
window.localStorage.setItem("record"+userID,recordArr);
$(‘.record_input‘).val(‘‘);
});
}
else{
recordArr2=getRecord.split(‘,‘);
if(recordArr2.length>2){
$(‘.whole‘).css(‘display‘,‘block‘);
var str=‘‘;
for(var i=0;i<2;i++) {
str+=‘<li class="history_item">‘+
‘<i class="history_i"></i>‘+
‘<span>‘+recordArr2[i]+‘</span>‘+
‘<i class="x fr" data-index=‘+i+‘></i>‘+
‘</li>‘;
}
$(‘.whole‘).before(str);
//显示全部记录
$(‘.whole‘).click(function(){
var str=‘‘;
for(var i=2;i<recordArr2.length;i++) {
str+=‘<li class="history_item">‘+
‘<i class="history_i"></i>‘+
‘<span>‘+recordArr2[i]+‘</span>‘+
‘<i class="x fr" data-index=‘+i+‘></i>‘+
‘</li>‘;
}
$(‘.whole‘).before(str);
$(this).css(‘display‘,‘none‘);
$(‘.close_whole‘).css(‘display‘,‘block‘);
});
//清空历史记录
$(‘.close_whole‘).click(function(){
window.localStorage.removeItem(‘record‘+userID);
$(‘.history‘).remove();
})
}
else{
recordShow(recordArr2);
}
//向本地添加记录
$(‘.record_btn‘).click(function(){
recordArr2.push($(‘.record_input‘).val());
window.localStorage.setItem("record"+userID,recordArr2);
$(‘.record_input‘).val(‘‘);
});
//删除单条记录
$(‘.history_list‘).on(‘click‘,‘.x‘,function(){
recordArr2.splice($(this).data(‘index‘),1);
window.localStorage.setItem("record"+userID,recordArr2);
$(‘.history_item‘).remove();
if(recordArr2.length<3){
$(‘.whole‘).css(‘display‘,‘none‘);
}
recordShow(recordArr2);
});
//记录显示
function recordShow(recordArr2){
var str2=‘‘;
for(var j=0;j<recordArr2.length;j++) {
str2+=‘<li class="history_item">‘+
‘<i class="history_i"></i>‘+
‘<span>‘+recordArr2[j]+‘</span>‘+
‘<i class="x fr" data-index=‘+j+‘></i>‘+
‘</li>‘;
}
$(‘.whole‘).before(str2);
}
}
});
</script>
</body>
</html>
以上是关于使用localStorage将搜索商品的记录保存在本地的主要内容，如果未能解决你的问题，请参考以下文章
微信小程序带搜索记录的输入框 -- localStorage
从 REST 服务更新 localStorage，但只更新新记录