浅谈asp.net通过本机cookie仿百度（google）实现搜索input框自动弹出搜索提示

对于通过用户输入关键词实现自动弹出相关搜索结果，这里本人给两种解决方案，用于两种不同的情形。
常见方法是在数据库里建一个用户搜索关系表，然后通过用户搜索框输入的关键字异步调用数据表中的相关数据，显示在一个隐藏div中。
第二种方式也就是我现在着重讨论的方式，适用于单个用户，基于此用户以往的搜索数据来实现搜索提示功能。技术关键是记录下用户的以往搜索数据，写入cookie，然后页面从用户本机cookie调用数据。
ok，下面进入正题。本文主要讲实现步骤，代码可根据自己实际需要更改。

一，如何写入cookie？

为了写入Cookie，他的步骤主要有三步，具体如下：
首先就要创建一个HttpCookie对象，通过这个对象来构造一个Cookie，这个对象的名称就是以后产生的Cookie名称。具体如下代码：

HttpCookie cookie = new HttpCookie("MyOnlyCookieName");//定义自己标示性的Cookie名称

然后对创建的HttpCookie对象的" Value" 属性分配一个字符串值，" Value" 的值就是后来产生的Cookie的值。
如：MyNameCookie.Value = "用户给Cookie赋值" ; 如果你想写入的Cookie数值不是一个简单的字符串，而是一个复杂的数据类型，我们知道这些数据类型是不能直接存贮到Cookie中的，因为Cookie中只能存贮字符串。但你可以通过一个变通的方法，就是把这个复杂的数据类型转换成多个字符串，然后把这多个字符串同时赋值给产生的Cookie值，这样Cookie中的内容就丰富了，以后利用Cookie完成的功能也强大了。这时你可能就会明白为什么当你浏览Web服务器，Web服务器会知道你什么时候曾经浏览过，并且曾经待过多长时间等信息了。因为这些信息已经存储到你第一次浏览页面时，Web服务器产生的Cookie中去了。下列代码是把多个字符串存储到Cookie的例子：

cookie [ " 姓名" ] = " 王天";
cookie [ " 性别" ] = " 男";
cookie [ " 年龄" ] = " 26";

Cookie有临时的，也有永远的。永久 Cookie 以文件形式存储在计算机上，关闭 Internet Explorer 时仍然保留在计算机上。再次访问该站点时，创建该 Cookie 的网站可以读取。在具体的编程时候，是在写入此Cookie的时候，设定Cookie的生命周期，具体如下代码：
DateTime dtNow = DateTime . Now ;
TimeSpan tsMinute = new TimeSpan ( 1 , 0 , 0 , 0 ) ;
cookie . Expires = dtNow + tsMinute ;
以上代码是设定产生的Cookie的生命期为" 一天" ，你可以通过修改" TimeSpan" 属性来设定产生Cookie的具体生命期。
ok，综合起来，带cookie的操作代码如下

public partial class cookieTest: System.Web.UI.Page
{
    string CookieKye = "jinWebCookies";
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void WriteCookie()
    {
        CookieKye = readCookie();
        HttpCookie cookie = new HttpCookie(CookieKye);//定义cookie对象以及名为Info的项
        DateTime dt = DateTime.Now;//定义时间对象
        TimeSpan ts = new TimeSpan(30, 0, 0, 0);//cookie有效作用时间.
        cookie.Expires = dt.Add(ts);//添加作用时间
        string searchKey=searchId.Text.Trim();
        cookie.Values.Add(searchKey, searchKey);//增加属性
        Response.AppendCookie(cookie);//确定写入cookie中
       
    }
    private string readCookie()
    {
        
        int i=0;
        while (i >= 0)
        {
            if (Request.Cookies[CookieKye+i] == null)
            {
                return CookieKye + i;
            }
            i++;
        }
        return "";
    }
    protected void demoCookie()
    {
        //读取cookie
        if (Request.Cookies[CookieKye] != null)
        {
            string temp = Convert.ToString(Request.Cookies["Info"].Value);
            if (temp == "")
            {
                Response.Write("空");
            }
            else
                Response.Write(temp);
        }
        else
        {
            Response.Write("error");
        }
        //修改cookie
        Response.Cookies["Info"]["user"] = "2";
        Response.Cookies["Info"].Expires = DateTime.Now.AddDays(1);
        //删除cookie下的属性
        HttpCookie acookie = Request.Cookies["Info"];
        acookie.Values.Remove("userid");
        acookie.Expires = DateTime.Now.AddDays(1);
        Response.Cookies.Add(acookie);
        //删除所有cookie，就是设置过期时间为现在就行了
        int limit = Request.Cookies.Count - 1;
        for (int i = 0; i < limit; i++)
        {
            acookie = Request.Cookies[i];
            acookie.Expires = DateTime.Now.AddDays(-1);
            Response.Cookies.Add(acookie);
        }
    }
    protected void Unnamed1_Click(object sender, EventArgs e)
    {
        WriteCookie();
    }

二，OK，现在是页面端的代码

对于页面端，此处我通过js来读取cookie数据，然后把数据写入提示框
首先，是javascript处代码

<script>
    var setSearchFlag;
    function showSearch(obj) {
        clearSearchFlag();
        var w3c = (document.getElementById) ? true : false; //w3c 标准
        var ns6 = (w3c && (navigator.appName == "Netscape")) ? true : false; //Netscape浏览器 标准的W3C
        var left, top;
        if (!ns6) {//判断IE
            var nLt = 0;
            var nTp = 0;
            var offsetParent = obj;

            while (offsetParent != null && offsetParent != document.body) {
                nLt += offsetParent.offsetLeft;
                nTp += offsetParent.offsetTop;
                offsetParent = offsetParent.offsetParent;
            }
            left = nLt;
            top = nTp + obj.offsetHeight;
        } else {//标准w3c
            left = obj.offsetLeft - 5;
            top = obj.offsetTop + obj.offsetHeight;
        }

        $('#showInfo').css('display', 'block');
        $('#showInfo').css('top', top);

        var seach = getCookie("jinWebCookies");
        $('#showInfo').html(seach);

    }
    function hideSearch(obj) {
        setSearchFlag = setTimeout(function () { $('#showInfo').css('display', 'none'); }, 100);
    }

    function clearSearchFlag() {
        window.clearTimeout(setSearchFlag); //取消由setTimeout()方法设置的定时器。
    }
    function getCookie(cookieName) {//读取cookie
        var cookieContent = '';
        var cookieAry = document.cookie.split("; "); //得到Cookie数组  
        for (var i = 0; i < cookieAry.length; i++) {
            //var cookieName = cookieName  + i;
            var temp = cookieAry[i].split("=");
            if (temp[0] == cookieName) {
                cookieContent = unescape(temp[1]);
            }
        }
        return cookieContent;
    }
    //写入Cookie  
    //document.cookie = "cookieName=" + escape("要写入的内容"); //cookieName为要写入的Cookie的名称  
	
</script>

ok，然后是插入一个搜索框，然后触发js

        <form id="form1" runat="server">
        <asp:TextBox runat="server" id="searchId" onkeyup="showSearch(this)" onblur="hideSearch(this)"/>
        <asp:Button runat="server" Text="btn_search AddCookie"
            onclick="Unnamed1_Click" />
	</form>
	<div style="width:150px;height:300px;border:1px solid #817F82;display:none;position: absolute;" id="showInfo"></div>

以上就是本人对此处cookie保存用户搜索数据，然后在用户输入搜索数据弹出提示做出的一些实验。总体方法就是这样，有兴趣的同学可以一起讨论，希望能有一个更有效的实现方式。