使用cookie保存搜索记录
保存搜索记录怎么实现：
这是html：
<input type="text" placeholder="请输入您搜索的内容" id="input_id1"/>
<i onclick="AddTextCookie()"></i>
<input type="button" onclick="AddTextCookie()" value="Add Text to Cookie" />
<div class="g_inputpos">
<div class="tit clearfix">
<input type="button" onclick="GetTextCookie()" value="Show Cookie Text" />
<h5 onclick="GetTextCookie()">搜索记录</h5>
<a href="javascript:;" onclick="DelTextCookie()">清空</a>
</div>
显示cookie数据<input type="text" id="input_id2" readonly="readonly" />
<dl id="input_id2">
</dl>
</div>
实现功能是保持到你的COOKIE当中去，然后通过截取后然后取出当前最新的一个搜索记录信息：
<script type="text/javascript">
function chkcookies(NameOfCookie)
{
var c = document.cookie.indexOf(NameOfCookie+"=");
if( (c == "undefined")||(c == 'undefined')|| (typeof(c) == "undefined"))
{
return false;
}
return true;
}
function delCookie(NameOfCookie)//删除cookie
{
document.cookie = NameOfCookie+"=;";
}
function addCookie(NameOfCookie,objValue,expiredays)
{
var oldCookie = getCookie(NameOfCookie);
//var tmp = typeof(oldCookie);
//alert(tmp);
//需要设置过期时长，否则关闭浏览器就会清除cookie
var exp = new Date();
exp.setTime(exp.getTime() + expiredays*24*60*60*1000);
var expires = "expires="+exp.toUTCString();
//alert(expires);
if( (oldCookie == "undefined")||(oldCookie == 'undefined')|| (typeof(oldCookie) == "undefined"))
{
document.cookie = NameOfCookie+"="+objValue +";"+ expires;
}
else
{
document.cookie = NameOfCookie+"="+oldCookie+""+objValue +"|";
}
}
function getCookie(NameOfCookie)
{
var arrStr = document.cookie.split("; ");
for(var i = 0;i < arrStr.length;i ++){
var temp = arrStr[i].split("=");
//alert(temp);
if(temp[0] == NameOfCookie)
return unescape(temp[1]);
}
return "";
}
function AddTextCookie()
{
var data = document.getElementById("input_id1").value;
addCookie("MY_Test_Text_Cookie",data,10);
}
function GetTextCookie()
{
document.getElementById("input_id2").value = getCookie("MY_Test_Text_Cookie");
$("#input_id1").html(document.cookie);
var arr = getCookie("MY_Test_Text_Cookie").split("|");
for(var i = 0;i < arr.length;i ++){
if(i==4)
{
return false;
}
var temp = arr[0];
var html="";
html+="<dd>"+temp+"</dd>";
$("#input_id2").html(html);
}
}
function DelTextCookie()
{
delCookie("MY_Test_Text_Cookie");
}
</script>
但是我应用到之后，感觉这个有些问题，比如说，新打开一个页面会发现没有记录了，所以我就用以下方法：
我这里实现的是点击输入框会展示出下面的4条历史记录，点击到记录则获取信息，然后剩下的就是需要自己写查询方法了！
这是html，：
<li class="last" id="swrod">
<input type="text" placeholder="请输入您搜索的内容" id="input_id1"/>
<i ></i>
<div class="g_inputpos" style="display:none;">
<div class="tit clearfix">
<h5 onclick="GetTextSession()">搜索记录</h5>
<a href="javascript:;" onclick="DelTextSession()">清空</a>
</div>
<dl id="input_id2">
</dl>
</div>
</li>
这是js
<script type="text/javascript">
//添加session
var allsearch="";
var search ="";
var searchWord="";
$(".last i").click(function(){
//点击搜索框把原来的和新输入的一起存入
search= $.trim($("#input_id1").val());
//判断输入是否是空值
if(search!="" && search!=null)
{
search=search+"|";
//不是空则进行添加搜索记录
allsearch=search+allsearch;
$.setSessionStorage("search",allsearch);
var search=$.trim($(".last").find("input").val());
}
else
{
layer.alert('请输入搜索关键字',{icon:1});
}
});
//获取Session到记录中
function GetTextSession()
{
//得到存的搜索
allsearch=$.getStorage("search");
//进行遍历
var arr = allsearch.split('|');
var html="";
for(var i = 0;i < arr.length-1;i ++){
if(i==4)
{
break;
}
var temp = arr[i];
html+="<dd>"+temp+"</dd>";
}
$("#input_id2").html(html);
}
//清除Session
function DelTextSession()
{
$.setSessionStorage("search","");
$(".g_inputpos").hide();
}
$(document).ready(function(){
var cur_url = location.href;//当前浏览器的路径
if(cur_url.indexOf("searchpage")>-1)
{
}
else
{
$("#input_id1").val("");
}
//点击输入框
$("#input_id1").click(function(){
$(".g_inputpos").show();
GetTextSession();
});
//离开输入框
$("#input_id1").mouseleave(function(){
$(".g_inputpos").hide();
});
//获取选中的历史搜索关键字
$('#input_id2 dd').live("click",function(){
var val = $(this).text();
$(this).parents('#swrod').find('input').val(val);
$('.g_inputpos').hide();
});
</script>
