【小练习】从cookie中取值

最新推荐文章于 2024-04-17 09:19:11 发布

hqq1007

最新推荐文章于 2024-04-17 09:19:11 发布

阅读量595

点赞数

本文链接：https://blog.csdn.net/hqq1007/article/details/46911793

版权

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

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：对字符串进行编码，这样就可以在所有的计算机上读取该字符串。