js利用cookie實(shí)現(xiàn)記住用戶頁(yè)面操作
開發(fā)過(guò)程中,有時(shí)候會(huì)遇到一些類似需求,比如記住用戶在瀏覽器層面所做的操作。之前做過(guò)一個(gè)功能,當(dāng)時(shí)使用了一個(gè)拖拽插件展示一個(gè)類似九宮格的報(bào)表圖,每個(gè)圖形都可以顯示和隱藏,如果用戶點(diǎn)擊了顯示或隱藏按鈕,那么下次進(jìn)入系統(tǒng)時(shí)瀏覽器保留上一次的操作結(jié)果。核心部分是使用js對(duì)cookie進(jìn)行操作,具體業(yè)務(wù)部分則是觸發(fā)點(diǎn)擊圖形事件時(shí),如果是隱藏,則將該圖形對(duì)應(yīng)的div從cookie中刪除,點(diǎn)擊顯示時(shí),將圖形div寫入cookie。本文只記錄cookie部分操作,具體業(yè)務(wù)代碼大家可以根據(jù)自己的實(shí)際情況去寫。
什么時(shí)cookie? cookie有4kb大小,超出長(zhǎng)度會(huì)返回空字符串; cookie存放在客戶端,可以方便的修改查看,所以不能用cookie存放重要信息; cooki生命周期會(huì)在關(guān)閉瀏覽器以后結(jié)束,如果要在一段事件內(nèi)使用,我們可以為cookie設(shè)置有效時(shí)間;Cookie,有時(shí)也用其復(fù)數(shù)形式 Cookies,指某些網(wǎng)站為了辨別用戶身份、進(jìn)行 session 跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)(通常經(jīng)過(guò)加密)。定義于 RFC2109 和 2965 中的都已廢棄,最新取代的規(guī)范是 RFC6265 [1] 。(可以叫做瀏覽器緩存)——引用自百度百科
方法如下1.設(shè)置cookie 參數(shù): cname:cookie 名稱,cvalue:cookie 值 ,exdays:cookie 的過(guò)期時(shí)間
function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = 'expires='+d.toGMTString(); document.cookie = cname + '=' + cvalue + '; ' + expires;}
2.獲取cookie
function getCookie(cname){ var name = cname + '='; var ca = document.cookie.split(’;’); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return '';}
3.刪除cookie
function delCookie(cname){ var exp = new Date(); exp.setTime(exp.getTime()-1); var cval = getCookie(cname); if(cval != null){document.cookie = cname + '=' + cval + ';expires=' + exp.toGMTString(); }}
希望這篇文章對(duì)你有所幫助,如果有用的話,記得關(guān)注我吆,后期持續(xù)為大家輸出更多內(nèi)容
參考:cookie操作
總結(jié)到此這篇關(guān)于js利用cookie實(shí)現(xiàn)記住用戶頁(yè)面操作的文章就介紹到這了,更多相關(guān)js cookie記住用戶內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. JSP取得在WEB.XML中定義的參數(shù)2. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過(guò)樹形結(jié)構(gòu)關(guān)系的問(wèn)題3. WMLScript的語(yǔ)法基礎(chǔ)4. el-input無(wú)法輸入的問(wèn)題和表單驗(yàn)證失敗問(wèn)題解決5. XML 非法字符(轉(zhuǎn)義字符)6. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)7. 不要在HTML中濫用div8. vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解9. XML入門的常見問(wèn)題(三)10. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂(lè)代碼
