js利用cookie来提示用户的输入记录

最新推荐文章于 2024-04-18 17:52:13 发布

small豆子

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量961

点赞数

分类专栏： js 文章标签： cookie javascript 浏览器

本文链接：https://blog.csdn.net/trackcode/article/details/39008725

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、需求说明

在输入框中当输入搜索关键字时，客户希望关联提示前几次输入的搜索关键字。

二、实现思路

Ø 方案一：运用cookie来存储用户输入的关键字

优点：

l 可配置到期规则 Cookie 可以在浏览器会话结束时到期，或者可以在客户端计算机上无限期存在，这取决于客户端的到期规则。

l 不需要任何服务器资源 Cookie 存储在客户端并在发送后由服务器读取。

l 简单性 Cookie 是一种基于文本的轻量结构，包含简单的键值对。

l 数据持久性虽然客户端计算机上 Cookie 的持续时间取决于客户端上的 Cookie 过期处理和用户干预，Cookie 通常是客户端上持续时间最长的数据保留形式。

缺点：

l 大小受到限制大多数浏览器对 Cookie 的大小有 4096 字节的限制，尽管在当今新的浏览器和客户端设备版本中，支持 8192 字节的 Cookie 大小已愈发常见。

l 用户配置为禁用有些用户禁用了浏览器或客户端设备接收 Cookie 的能力，因此限制了这一功能。

l 潜在的安全风险 Cookie 可能会被篡改。用户可能会操纵其计算机上的 Cookie，这意味着会对安全性造成潜在风险或者导致依赖于 Cookie 的应用程序失败。

另外，虽然 Cookie 只能被将它们发送到客户端的域访问，历史上黑客已经发现从用户计算机上的其他域访问 Cookie 的方法。您可以手动加密和解密Cookie，

但这需要额外的编码，并且因为加密和解密需要耗费一定的时间而影响应用程序的性能。

Ø 方案二：在数据库中存储用户的输入的关键字（1、运用ajax来加载输入的数据2、将用户输入的数据输出到文件中，一次返回给客户端）

优点：

l 数据存储在服务器端相对与cookie来说比较安全

l 可以实时的得到用户的搜索动向

缺点：

l 需要频繁的访问数据库，增加服务器的负担

l 具有延迟性

Ø 总体分析：提示性关键字，不包含一些敏感信息（例如：用户名等），所以采取方案一来解决这个问题。

三、使用配置

Ø 源码存放路径 cookie_input_think/src

Ø Index.html 中的配置

1、引入js文件

<script type="text/javascript" src="js/prompt.js"></script>

2、初始化方法

 var prompt = new Prompt({
	cookieId:"searchId",//cookie唯一标示符
	keepDays:3 //保存天数
});

3、调用例子

//调用例子		
	$('.save').click(function(){ //保存cookie的方法
		prompt.addHistory($.trim($(".search").val()));
	});		
	$('.search').keyup(function(){ //联想
		    var data = prompt.getData();
			//console.log(data);
			//console.log(data.toString());
			if(data == ""){
				return;
			}
			//console.log(data.toString());
			var keyword = $(".search").val();
			var html = "";
			for(var i=0; i < data.length && $.trim(keyword) != ""; i++){
				var keydata = data[i];
				//console.log(keydata);
				if(keydata.indexOf(keyword)>-1){
					html+=keydata;
					html+=",";
				}
			}
			$(".keyword").text(html);	
	});

js代码 prompt.js

/**
*构造函数
*@param data = {cookieId:"searchId", keepDays:7}
*/
function Prompt(data){
	this.cookieId = data.cookieId; //cookie唯一标识
	this.keepDays = data.keepDays; //cookie保质期
}
/**
*追加cookie里的值
*@param keyword 需要追加的值
*/
Prompt.prototype.addHistory = function(keyword){
	if($.trim(keyword)==""){
			return;
	}
	var stringCookie = unescape(this.getCookie(this.cookieId));
	var str = "";
	if(stringCookie != ""){
		str = stringCookie;
	}
	str = str+keyword+",";
	this.setCookie(escape(this.noRepeat(str)));
}

/**
* 设置cookie
*/
Prompt.prototype.setCookie = function(value){
	var exdate = new Date();
	exdate.setDate(exdate.getDate+this.keepDays);
	var cookieVal = this.cookieId+'='+value+';expires='+exdate.toGMTString();
	document.cookie=cookieVal;
}

/**
* 获取cookie里的值
* @return ['房哥','房姐','御姐','屌丝']
*/
Prompt.prototype.getData = function(){
	var data = unescape(this.getCookie());
	data = data.substring(0, data.length-1).split(",")
	return data;
}
/**
* 删除当前选中的值 例如：删除 '房姐'  resetData('房姐')
*/
Prompt.prototype.resetData = function(keyword){
	this.removeCookie(this.cookieId, keyword);
}

Prompt.prototype.removeCookie = function(keyword){
	var data = unescape(this.getCookie()).split(",");
	var newData = "";
	for(var i=0; i<data.length;i++){
		if(data[i] !="" && data[i] != keyword){
			newData = newData + data[i] + ",";
		}
	}
	this.setCookie(escape(newData));
}  


Prompt.prototype.getCookie = function(){
	if (document.cookie.length>0){
		c_start=document.cookie.indexOf(this.cookieId + "=")
		if (c_start!=-1){ 
			c_start=c_start + this.cookieId.length+1 
			c_end=document.cookie.indexOf(";",c_start)
			if (c_end==-1) c_end=document.cookie.length
			   return document.cookie.substring(c_start,c_end)
		} 
	 }
	return ""
} 

/**
* 去除重复值
*@param str ['御姐','御姐','房姐','房哥']
*@return ['御姐','房姐','房哥']
*/
Prompt.prototype.noRepeat = function(str){
	var data = str.split(",");
	var newData = "";
	for(var i=0; i<data.length; i++){
		if(!(newData.indexOf(data[i])>-1)){
			newData = newData + data[i]+",";
		}
	}
	return newData;
}

整个页面代码 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜索输入联想cookie的实现</title>
<script type="text/javascript" src="js/prompt.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
说明：点击搜索按钮时保存关键词，当在词输入时将联想上次输入的关键字<br />
搜索:<input type="text" class="search" value=""/>
    <input type="button" class="save" value="点击保存搜索关键字"/>
<br />
关键字:<br />
<div class="keyword"></div>
<script type="text/javascript">
    var prompt = new Prompt({
				cookieId:"searchId",//cookie唯一标示符
				keepDays:3 //保存天数
			});
	
	//调用例子		
	$('.save').click(function(){ //保存cookie的方法
		prompt.addHistory($.trim($(".search").val()));
	});		
	$('.search').keyup(function(){ //联想
		    var data = prompt.getData();
			//console.log(data);
			//console.log(data.toString());
			if(data == ""){
				return;
			}
			//console.log(data.toString());
			var keyword = $(".search").val();
			var html = "";
			for(var i=0; i < data.length && $.trim(keyword) != ""; i++){
				var keydata = data[i];
				//console.log(keydata);
				if(keydata.indexOf(keyword)>-1){
					html+=keydata;
					html+=",";
				}
			}
			$(".keyword").text(html);	
	});		
</script>    
</body>
</html>

small豆子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js利用cookie来提示用户的输入记录

一、需求说明在输入框中当输入搜索关键字时，客户希望关联提示前几次输入的搜索关键字。二、实现思路方案一：运用cookie来存储用户输入的关键字优点：l 可配置到期规则 Cookie 可以在浏览器会话结束时到期，或者可以在客户端计算机上无限期存在，这取决于客户端的到期规则。l 不需要任何服务器资源 Cookie 存储在客户端并在发送后由服务器读取。l
复制链接

扫一扫