js利用cookie来提示用户的输入记录
2014-09-02 17:03
267 查看
一、需求说明
在输入框中当输入搜索关键字时，客户希望关联提示前几次输入的搜索关键字。二、实现思路
Ø 方案一：运用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(){
9c64
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- .NET+JS对用户输入内容进行字数提示功能的实例代码
- 利用Cookie记录用户浏览的图片
- JavaScript 利用Cookie记录用户登录信息
- js中利用isNaN函数判断用户输入是否为数字
- jquery.cookie.js && java后台代码 操作cookie实现记住当前用户输入信息代码
- 用js做一个输入框，在用户没有输入的时候不能提交并提示
- 牛腩购物 8 整合用户留言 动软生成器 ,.NET在后置代码中输入JS提示语句（背景不会变白）,repeater 循环的时候事件判断,repeater 隔行 奇数行,item列，隐藏区块 Panel 的使用，前台绑定代码的时候使用函数
- 利用Cookie实现用户浏览商品记录
- .NET+JS对用户输入内容进行字数提示功能的实例代码
- JavaScript 利用Cookie记录用户登录信息
- js技术--cookie基础（封装cookie、使用cookie记录上一次用户登录名）
- 利用Ajax向Servlet发送请求下载统计后的Excel文件,利用jquery.blockUI.js给予用户等待提示
- 用百度siteapp的uaredirect.js判断用户访问端而进行域名的自动跳转,并通过cookie记录手机访问电脑端的状态
- 《JavaWeb---利用cookie记录用户的历史浏览》
- 利用回调实现GridView的批量删除并提示删除的记录数
- 利用正则表达式检测用户的输入 :)
- 利用可变数组将用户输入数字排序后输出
- 一个用js限制用户输入字节个数的问题.
- 利用js的cookie来解决domino中frame中的页面返回异常的问题！
- Java 实训3-3 图形界面java applet 用户输入正整数 不是则标签提示错误