【小练习】从cookie中取值

来源：互联网发布：视频后期制作软件电脑编辑：程序博客网时间：2024/05/29 18:39

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

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 listif(stringHistory.indexOf(history) >= 0){return false;}var json = JSON.parse(stringHistory);//add a new recordjson['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