localStorag是在HTML5中，新加入的□□一个特性，localStorage主要是用□□□来作为本□□地存储来□□使用的，用来解决cookie存储空间□□不足的问▼题，因为cookie中每条cookie的存储空□□□间为4k，但是localStorage在一般浏▼览器中支□□持的是5M大小，这个大小□□在不同的□□□浏览器中□□会有所不□□□同。
localStorage的优势是□□□拓展了cookie的4K限制，localStorage会可以将◥第一次请□□□求的数据□□直接存储◢到本地，这个相当□□于一个5M大小的针□□□□对于前端▼页面的数□□据库，相比于cookie可以节约□□□带宽，但是局限▼性是只有□□□在IE8以上的IE版本才支★持localStorage这个属性。目前所有▼的浏览器★中都会把localStorage的值类型□□□□限定为string类型，所以在使□□□用时，需要把string类型转成□□我们常用▲的JSON数组对象□□类型。localStorage在浏览器□□□□的隐私模□□□□式下是不□□□□可读取的，localStorage本质上是□□□□对字符串□□□□的读取，如果存储□□□内容多的✦话会消耗□□□内存空间，会导致页□□□面变卡，所以需要□□控制存储□□□□的数据量，或者清除□□□□存储数据。localStorage不能被爬◉虫抓取到，从一定程△度上保护□□了用户个□□人隐私。
以下是使用展示
因为我搜□□□索框与展□□□□示搜索结□□果记录的□□□页面是分※开的，所以我这□□□□边是先把□□搜索值传●递到后台，然后再传□□□□到前端。
然后就能得到以下的历史搜索记录列表
根据网站▼的需求，我这边还□□加上了删❖除单条历☆史搜索记□□□□录，清除所有□□□历史搜索□□□□记录以及□□根据历史□□□搜索记录□□□再查询功□□□能。
以下贴具体代码：
前端代码：
<div class="orderlist">
<ul id="keyname">
</ul>
<div class="btn">
<input type="button" id="Clear" onclick="DeletaAll()" value="Clear" class="b1" />
<input type="button" id="Track" onclick="Track()" value="Track" class="b2"/>
</div>
</div>
Javascript代码：
<script>
var searchArr;
//定义一个search用来存储□□□□搜索记录●的，判断浏览▲器有无数●据存储（搜索历史）
if(localStorage.search){
//如果有，则把搜索☆记录转成□□□数组的形□□□式存放到searchArr的数组里（localStorage以字符串□□□□的形式存□□□储，所以要把◇它转换成□□□□数组的形★式）
searchArr= localStorage.search.split(",")
}else{
//如果没有，则定义searchArr为一个空的数组
searchArr = [];
}
// console.log(searchArr);
//把存储的数据显示出来作为搜索历史
MapSearchArr();
$(function(){
var val = '{$trackNo}';//接收从后台传来的搜索值
if(val!=''){
//判断搜索值是否已重复，如果重复就去重
KillRepeat(val);
//去重后把数组存储到浏览器localStorage
localStorage.search = searchArr;
//然后再把搜索内容显示出来
MapSearchArr();
}
});
function MapSearchArr(){
var tmpHtml = "";
for (var i=0;i<searchArr.length;i++){
var n = i+1;
tmpHtml += "<li onclick='Choose(this)'><div class='t1'>"+n+".</div><div class='t2'>"+searchArr[i]+"</div><div class='ic' onclick='Del(this)'></div></li>"
}
$("#keyname").html(tmpHtml);
}
//去重
function KillRepeat(val){
var kill = 0;
for (var i=0;i<searchArr.length;i++){
if(val===searchArr[i]){
kill ++;
}
}
if(kill<1){
searchArr.push(val);
}
}
//删除搜索记录
function Del(obj){
var n = $(obj).prev().text();
DeleteArr(n);
}
//删除
function DeleteArr(val){
for (var i=0;i<searchArr.length;i++){
if(val==searchArr[i]){
searchArr.splice(i,1);
}
}
if(searchArr.length==0){
DeletaAll();
}else{
localStorage.search = searchArr;
window.location.reload();
}
}
//删除所有的搜索记录
function DeletaAll(){
localStorage.clear();
window.location.href="{:urlrotue('Search/index2')}";
}
function Choose(obj){
$(obj).addClass('on').siblings().removeClass('on');
}
//点击搜索记录进行查询
function Track(){
var trackno = $(".on").children('.t2').text();
window.location.href = "{:urlrotue('Search/index2')}?trackNo="+ trackno;
}
</script>
