js操作cookie保存瀏覽記錄的方法
本文實(shí)例講述了js操作cookie保存瀏覽記錄的方法。分享給大家供大家參考,具體如下:
說明:最近做了一個(gè)功能,記錄用戶瀏覽過的產(chǎn)品頁(yè)面。我的思路是,客戶每次進(jìn)入產(chǎn)品頁(yè)面,就自己調(diào)用JS把產(chǎn)品信息以json的形式保存到cookie里面。
瀏覽記錄的顯示是從cookie里讀出來,然后解析成json,生成html元素。因?yàn)橛脩艨赡軙?huì)同時(shí)打開好幾個(gè)頁(yè)面,這幾個(gè)頁(yè)面上可能都有瀏覽記錄,為了使即使顯示瀏覽記錄,每秒中刷新一次。
要用到2個(gè)js文件,history.js,關(guān)鍵的聊天記錄保存和讀取代碼。json.js,對(duì)json進(jìn)行處理。
history.js
var addHistory=function(num,id){ stringCookie=getCookie('history'); var stringHistory=""!=stringCookie?stringCookie:"{history:[]}"; var json=new JSON(stringHistory); var e="{num:"+num+",id:"+id+"}"; json['history'].push(e);//添加一個(gè)新的記錄 setCookie('history',json.toString(),30); } //顯示歷史記錄 var DisplayHistory=function(){ var p_ele=document.getElementById('history'); while (p_ele.firstChild) { p_ele.removeChild(p_ele.firstChild); } var historyJSON=getCookie('history'); var json=new JSON(historyJSON); var displayNum=6; for(i=json['history'].length-1;i>0;i--){ addLi(json['history'][i]['num'],json['history'][i]['id'],"history"); displayNum--; if(displayNum==0){break;} } } //添加一個(gè)li元素 var addLi=function(num,id,pid){ var a=document.createElement('a'); var href='product.action?pid='+id; a.setAttribute('href',href); var t=document.createTextNode(num); a.appendChild(t); var li=document.createElement('li'); li.appendChild(a); document.getElementById(pid).appendChild(li); } //添加cookie var setCookie=function(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) cookieVal=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); // alert(cookieVal); document.cookie=cookieVal; } //獲取cookie function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) { c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length // document.write(document.cookie.substring(c_start,c_end)+"<br>"); return unescape(document.cookie.substring(c_start,c_end)) } } return "" }
json.js
var JSON = function(sJSON){ this.objType = (typeof sJSON); this.self = []; (function(s,o){for(var i in o){o.hasOwnProperty(i)&&(s[i]=o[i],s.self[i]=o[i])};})(this,(this.objType=='string')?eval('0,'+sJSON):sJSON); } JSON.prototype = { toString:function(){ return this.getString(); }, valueOf:function(){ return this.getString(); }, getString:function(){ var sA = []; (function(o){ var oo = null; sA.push('{'); for(var i in o){ if(o.hasOwnProperty(i) && i!='prototype'){ oo = o[i]; if(oo instanceof Array){ sA.push(i+':['); for(var b in oo){ if(oo.hasOwnProperty(b) && b!='prototype'){ sA.push(oo[b]+','); if(typeof oo[b]=='object') arguments.callee(oo[b]); } } sA.push('],'); continue; }else{ sA.push(i+':'+oo+','); } if(typeof oo=='object') arguments.callee(oo); } } sA.push('},'); })(this.self); return sA.slice(0).join('').replace(/ objectobject ,/ig,'').replace(/,\}/g,'}').replace(/,\]/g,']').slice(0,-1); }, push:function(sName,sValue){ this.self[sName] = sValue; this[sName] = sValue; } }
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法
寫這個(gè)是因?yàn)樽罱〕绦虻囊粋€(gè)需求需要從小程序跳轉(zhuǎn)到客戶的官網(wǎng),或者其他外部報(bào)名鏈接,下面這篇文章主要給大家介紹了關(guān)于微信小程序跳轉(zhuǎn)外部鏈接的詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下2022-10-10微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多層級(jí)復(fù)選框菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07javascript中利用數(shù)組實(shí)現(xiàn)的循環(huán)隊(duì)列代碼
javascript中利用數(shù)組實(shí)現(xiàn)的循環(huán)隊(duì)列代碼,需要的朋友可以參考下。2010-01-01JS實(shí)現(xiàn)數(shù)組刪除指定元素功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組刪除指定元素功能,涉及javascript數(shù)組遍歷、排序、判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06JavaScript實(shí)現(xiàn)密碼框輸入驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)密碼框輸入驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09CommonJS與ES6?Module的使用區(qū)別分析
這篇文章主要為大家介紹了CommonJS與ES6?Module的使用區(qū)別分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04基于JavaScript實(shí)現(xiàn)移除(刪除)數(shù)組中指定元素
在Array對(duì)象中有給定的函數(shù)可以刪除數(shù)組中指定的元素,雖然非常好用,但是總感覺看不到摸不著的比較別扭,下面就分享一個(gè)自定義的刪除數(shù)組指定索引值元素的函數(shù),希望給大家一個(gè)全新的思路2016-01-01JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能
這篇文章主要介紹了JS基于設(shè)計(jì)模式中的單例模式(Singleton)實(shí)現(xiàn)封裝對(duì)數(shù)據(jù)增刪改查功能.結(jié)合實(shí)例形式分析了javascript基于單例模式結(jié)合ajax針對(duì)數(shù)據(jù)庫(kù)進(jìn)行增刪改查的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02