zoukankan      html  css  js  c++  java
  • 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自己主动弹出搜索提示

    对于通过用户输入关键词实现自己主动弹出相关搜索结果,这里本人给两种解决方式,用于两种不同的情形。


    常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的keyword异步调用数据表中的相关数据,显示在一个隐藏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完毕的功能也强大了。

    这时你可能就会明确为什么当你浏览Webserver,Webserver会知道你什么时候以前浏览过。而且以前待过多长时间等信息了。由于这些信息已经存储到你第一次浏览页面时,Webserver产生的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="150px;height:300px;border:1px solid #817F82;display:none;position: absolute;" id="showInfo"></div>
    以上就是本人对此处cookie保存用户搜索数据,然后在用户输入搜索数据弹出提示做出的一些实验。

    整体方法就是这样,有兴趣的同学能够一起讨论。希望能有一个更有效的实现方式。


  • 相关阅读:
    延时显示(类QQ头像显示)
    getComputedStyle与currentStyle获取样式(style/class)
    私单
    厂里
    009 vue的响应式方法
    008 vue的v-for的使用及key的使用
    007 v-if,v-else-if,v-else和v-show
    006 Vue的v-on
    005 Vue 计算属性
    004 Vue的v-bind属性
  • 原文地址:https://www.cnblogs.com/jhcelue/p/6873139.html
Copyright © 2011-2022 走看看