浅谈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="width:150px;height:300px;border:1px solid #817F82;display:none;position: absolute;" id="showInfo"></div>
以上就是本人对此处cookie保存用户搜索数据,然后在用户输入搜索数据弹出提示做出的一些实验。
整体方法就是这样,有兴趣的同学能够一起讨论。希望能有一个更有效的实现方式。
浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自己主动弹出搜索提示的更多相关文章
- 【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC八大类扩展(上篇)
lASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC运行过程
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 视图与控制器传递数据
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 控制器
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈ASP.NET MVC 路由
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 【ASP.NET MVC系列】浅谈ASP.NET 程序发布过程
ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...
- 浅谈ASP.NET ---- 系列文章
[01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...
随机推荐
- IOS学习笔记37——ViewController生命周期详解
在我之前的学习笔记中讨论过ViewController,过了这么久,对它也有了新的认识和体会,ViewController是我们在开发过程中碰到最多的朋友,今天就来好好认识一下它.ViewContro ...
- GC 机制
1. 为什么需要垃圾回收? 因为内存是有限的,在不断的分配内存空间而不回收的话内存迟早都会被消耗完,所以垃圾回收是必须的. 2. 触发GC 的条件: 1.GC在优先级最低的线程中运行,一般在应用程序空 ...
- 微信小程序wx.request请求服务器json数据并渲染到页面
[原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...
- @ApiParam @RequestParam @PathVariable 用法
文章来源:https://www.cnblogs.com/hello-tl/p/9204279.html 1.@ApiParam ,是注解api的参数 ,也就是用于swagger提供开发者文档 ,文档 ...
- 嵩天老师的零基础Python笔记:https://www.bilibili.com/video/av13570243/?from=search&seid=15873837810484552531 中的1-14讲
#coding=gbk#嵩天老师的零基础Python笔记:https://www.bilibili.com/video/av13570243/?from=search&seid=1587383 ...
- LeetCode(42)Trapping Rain Water
题目 Given n non-negative integers representing an elevation map where the width of each bar is 1, com ...
- 【HDU 3336】Count the string(KMP+DP)
Problem Description It is well known that AekdyCoin is good at string problems as well as number the ...
- Leetcode 313.超级丑数
超级丑数 编写一段程序来查找第n个超级丑数. 超级丑数是指其所有质因数都是长度为 k 的质数列表 primes 中的正整数. 示例: 输入: n = 12, primes = [2,7,13,19] ...
- BGP路由属性详解
Weight属性:cisco私有的BGP属性参数,它只适用于一台路由器中的路由,也就是不会传递给任何其他的路由器.他的取值范围为<0-65535>,这个数越大优先级越高,默认从邻居学到的路 ...
- 洛谷P2414 - [NOI2011]阿狸的打字机
Portal Description 首先给出一个只包含小写字母和'B'.'P'的操作序列\(s_0(|s_0|\leq10^5)\).初始时我们有一个空串\(t\),依次按\(s_0\)的每一位进行 ...