搜索框的功能实现

这个页面主要是分为几点件事 由简入细
//刚打开页面时 显示的画面
//1.假设 localeStorage中有数据 那么用渲染出来 ，如果没有数据则不显示，
//2.必须先获取 储存的localeStoragre 那么可以封装一个函数 getKeywords()
//3.把取到的字符串，转换成数组 arr 渲染到模板
//4.模板这里可以封装为一render(arr)函数，意为刷新函数；
//5.完成显示，

//二
1.点击事件，获取当前输入的val(),如果没有输入这 return；后面不再运行；
2.调用获取 localstorage 的函数 .取到数据后，为数组，
3.把当前的数据 push添加到 一个数组arr中，
4.render(arr)
5.将这个数组存储到localeStorage 要转换为json字符串，str=JSON.stringify(arr)‘
6.window.localeStorage.setItem(“keyword”,str);
//三 清除事件
// 1.点击清除 消除localstorage中的数据（全部清除）
// 再调用刷新函数

1.
var arrKey=[];
arrKey=getKeywords(“keyword”);
render(arrKey);
2.
//封装几个个函数
- function getKeyword(){
var arr=[];
var arrStr=window.localeStorage.getItem(“keyword”);
if(arrStr){
arr=JSON.parse(arrStr);
}
return arr
};
3.
//存储 localeStorage
function savekeywords(arr){
var str=JSON.stringify(arr);
window.localStorage.setItem(“keyword”,str);
}
4.
//刷新 渲染
function render(arr){
if(arr.length>0){
$(“.searchhistory”).show(); }else{ $(“.searchhistory”).hide(); } var html=template(“searchList”,{list:arr});$(“.searchhistory ul”).html(html);

}
//取 keyword
$(“.mui-btn-primary”).click(function(){ var keyword=$(this).siblings(“input”).val();
$(this).siblings(“input”).val(“”);
if(keyword.length==0){
return;
}
var arrKey=getKeywords(“keyword”);
arrKey.push(keyword);
savekeywords(arrKey);
// var str=JSON.stringify(arrKey);
// window.localStorage.setItem(“keyword”,str);
render(arrKey);
window.location.href=”./list.html?proName=”+keyword;
});

6.单个删除功能
其实是删除点击时 对应的 localeStorger 中的数据，那么在渲染模板时 需要设置 自定义属性 如 data-id=“value.id”, 则取值时为 index= $(this).data(“id”) ;

在 点击事件中
{
arr.splice(index,1);
// 储存 数组
saveKeyword(arr);
//再刷新
render(arr);

}

7.全部清除 就简单了
移除 localeStorage
window. localeStorage .remove(“keyword”);
刷新
var arr=getKeywords(“keyword”);
render(arr);

ps 写的时候 手打可能会错