【小练习】从cookie中取值

功能:在输入框输入时,自动匹配出之前查询过的历史记录

html代码如下:

<html>
	<head>
		<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="script/historysearch.js"></script>
	</head>
	<body>
		<input type="text" name="inputSearch" id="inputSearch"/>
		<input type="button" name="submitButton" id="submitButton" value="提交"/>
		<input type="button" name="searchButton" id="searchButton" value="查询缓存"/><br/><br/>
		<label>历史输入信息:</label>
		<ul name="history" id="history"/>
	</body>
</html>

js代码如下:

jQuery(document).ready(function() {
	
	var inputText = '';
	var inputDate = '';
	
	$("input[name='inputSearch']").on('input',function(){		
		setStr(this);
		DisplayHistory();	
	}).on("click",function(e){
		setStr(this);
		DisplayHistory();
	});
	$("#submitButton").bind('click',function(){
		var _text = $("input[name='inputSearch']").val();
		addHistory(_text);
	});
	
	$("#searchButton").bind('click',function(){
		alert(unescape(document.cookie));
	});
})

function setStr(thisObj){
	inputText = $(thisObj).val();
};

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

function addHistory(str){
	var stringCookie = getCookie('history');
	var stringHistory = "" != stringCookie?stringCookie:'{"history":[]}';
	var historyObj = {
			text : str
		};
	var history = JSON.stringify(historyObj);
	//Quit and do not add history record if the query options exist in the history list
	if(stringHistory.indexOf(history) >= 0){
		return false;
	}
	var json = JSON.parse(stringHistory);
	
	//add a new record
	json['history'].push(historyObj);
	setCookie('history',JSON.stringify(json),30);
};

function setCookie(str,value,expiredays){
	var exdate = new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	cookieVal = str + "=" + escape(value) + ((expiredays == null) ? "" : ";expires="+exdate.toGMTString());
	document.cookie = cookieVal;
};

function DisplayHistory(){
	var p_ele=document.getElementById('history');
	
	var _historyJSON = this.getCookie('history');
	_historyJSON = "" != _historyJSON?_historyJSON:'{"history":[]}';
	
	var json = JSON.parse(_historyJSON);
	
	for(var i = json['history'].length-1;i >= 0;i--){
		var record = json['history'][i];
		record.text = record.text == undefined ? "" : record.text;
		if(inputText == "") {
			addLi(record,"history");
		}
		else if(record.text.match(inputText)){
			addLi(record,"history");
		}
	}

};

function addLi(object,pid){
	var li = document.createElement('li'),htm = '';
	li.setAttribute('class','resultlist');
	li.setAttribute('data-text',object.text);
	htm += object.text;
	li.innerHTML = htm;
	document.getElementById(pid).appendChild(li);
};

function removeLi(pid){
	var s = document.getElementById(pid);
	var t = s.childNodes.length;
	for (var i=0; i<t-1; i++) {
		s.removeChild(s.childNodes[i]);
	}
};





知识点记录:

1、js通过document.cookie来读取或者写入cookie信息;

2、创建cookie:document.cookie = 'user=hqq1007';

3、JSON.parse(str):从字符串str中解析出json对象;

4、JSON.stringify():从json对象中解析出字符串;

5、unescape:对用escape()编码的字符串进行解码,原理:通过找到形式为 %xx 和 %uxxxx 的字符序列(x 表示十六进制的数字),用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码。

6、escape:对字符串进行编码,这样就可以在所有的计算机上读取该字符串。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值