Javascript 對(duì)cookie操作詳解及實(shí)例
js 操作 cookie 的方法
cookie
cookie,有時(shí)候也用其復(fù)數(shù)形式Cookies,指某些網(wǎng)站為了辨別用戶身份,進(jìn)行session跟蹤而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)(經(jīng)常通過加密)。定義于RFC2109和2965都已廢棄,最新取代的規(guī)范是RFC6265。
cookie的作用
服務(wù)器可以利用Cookie包含信息的任意性來篩選經(jīng)常性維護(hù)這些信息,以判斷在HTTP傳輸中的狀態(tài)。Cookie最典型的英語是判斷注冊(cè)用戶是否已經(jīng)登錄網(wǎng)站,用戶可能會(huì)得到提示,是否在下一次進(jìn)入此網(wǎng)站時(shí)保留用戶信息以便簡(jiǎn)化登錄步驟,浙西都是Cookie的功能。另一個(gè)重要張合是“購物車”之類處理。用戶可能會(huì)在一段時(shí)間內(nèi)在同一家網(wǎng)站的不同頁面中選擇不同的商品,這些信息都會(huì)寫入Cookie,以便在最后付款時(shí)提取信息。
js設(shè)置cookie
document.cookie="key=value"; //例 document.cookie="name=weiqi"; //可以在控制臺(tái)中打印出cookie console.log(document.cookie);
如何修改和獲取cookie
js中并沒有提供獲取cookie的方法,所以只能自己封裝方法,相同的key的cookie只能存在一個(gè),如果定義了一個(gè)document.cookie="age=21",后面又定義了document.cookie="age=30",那么后面定義的cookie會(huì)覆蓋前面定義的cookie,所以修改cookie值的時(shí)候只用重新定義個(gè)key相同的cookie就可以了。那么獲取cookie的時(shí)候也只用在cookie中獲取到這個(gè)key后面的“=”和“;”直接的字符串,那就是這個(gè)cookie的值了,獲取的方法又很多種,這里我寫一種比較簡(jiǎn)單的:
function getCookie(key){ var index = document.cookie.indexOf(key); var returnValue; if(index!==-1){ var tIndex = document.cookie.indexOf(";",index); var target = document.cookie.substring(index,tIndex); var returnValue = decodeURIComponent(target.replace(key+"=","")) } return returnValue; } document.cookie="name=weiqi"; getCookie("name"); //weiqi
刪除cookie
cookie是有有效期的,前面我們?cè)O(shè)置cookie的時(shí)候都沒有設(shè)置有效期,如果我們將cookie的有效期設(shè)置成一個(gè)已經(jīng)過去的時(shí)間,那么它就無效了,下面來實(shí)現(xiàn)一下:
function delCookie(key){ var d = new Date(); document.cookie=key+"=;expires="+ d.toGMTString(); } document.cookie="name=weiqi"; delCookie("name"); //undefined
給cookie設(shè)置一個(gè)有效期
通過expires給cookie設(shè)置一個(gè)有效期,現(xiàn)在我們?cè)O(shè)置一個(gè)cookie的有效期是10天,如下:
var d = new Date(); var time = 10; d.setTime(d.getTime()+time*1000*60*60*24); document.cookie="name=weiqi;expires="+ d.toGMTString();
封裝cookie
將自定義的一些方法完善一下封裝成一個(gè)對(duì)象,這樣在使用的時(shí)候就可以直接拿來用了:
//封裝cookie方法的對(duì)象 var cookie = { setCookie:function(key,value,time){ if(key == undefined){ return; } if(time!== undefined){ var d = new Date(); d.setTime(d.getTime()+time*1000*60*60*24); document.cookie=key+"="+value+";expires="+ d.toGMTString(); }else{ document.cookie=key+"="+value; } }, getCookie:function(key){ var index = document.cookie.indexOf(key); var returnValue; if(index!==-1){ var tIndex = document.cookie.indexOf(";",index); var target = document.cookie.substring(index,tIndex); var returnValue = decodeURIComponent(target.replace(key+"=","")) } return returnValue; }, delCookie:function(key){ var d = new Date(); document.cookie=key+"=;expires="+ d.toGMTString(); } } //測(cè)試 cookie.setCookie("home") cookie.setCookie("name","衛(wèi)旗"); cookie.setCookie("age",22); cookie.setCookie("sex","男") cookie.getCookie("sex") cookie.delCookie("age")
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- JS實(shí)現(xiàn)Cookie讀、寫、刪除操作工具類示例
- javascript 中Cookie讀、寫與刪除操作
- javascript 操作cookies詳解及實(shí)例
- javascript操作cookie
- JS中對(duì)Cookie的操作詳解
- JS封裝cookie操作函數(shù)實(shí)例(設(shè)置、讀取、刪除)
- javascript操作Cookie(設(shè)置、讀取、刪除)方法詳解
- js中的cookie的讀寫操作示例詳解
- JS操作Cookie寫入和讀取實(shí)例代碼
- JS操作Cookies包括(讀取添加與刪除)
- JavaScript實(shí)現(xiàn)cookie的操作
相關(guān)文章
js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)
這篇文章主要給大家介紹了關(guān)于js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)的相關(guān)資料,主要記錄一下比較常見的圖片格式(File、Blob、base64)在不同的場(chǎng)景他們之間的相互轉(zhuǎn)換的方法,需要的朋友可以參考下2023-04-04使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效
這篇文章主要介紹了使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過特效的方法,需要的朋友可以參考下2015-01-01js文件中引入另一個(gè)js文件的4種方法總結(jié)
JavaScript文件是一個(gè)文本類型的文件,在任何文本編輯器中都可以被打開和編輯,JavaScript文件的擴(kuò)展名為js,這篇文章主要給大家介紹了關(guān)于js文件中引入另一個(gè)js文件的4種方法總結(jié),需要的朋友可以參考下2023-12-12js實(shí)現(xiàn)隨機(jī)抽選效果、隨機(jī)抽選紅色球效果
本文主要分享了js實(shí)現(xiàn)隨機(jī)抽選效果、隨機(jī)抽選紅色球效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01在layui框架中select下拉框監(jiān)聽更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽更改事件的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript中的緩動(dòng)效果實(shí)現(xiàn)程序
javascript中的緩動(dòng)效果可以應(yīng)用于很多地方,比如距離位移上的變化:圖片的滾動(dòng)、焦點(diǎn)圖的輪轉(zhuǎn)切換,透明度上的變化:漸隱漸現(xiàn)。凡是存在運(yùn)動(dòng)的狀態(tài)都適用,下面以最基本的塊在容器內(nèi)從左到右滑動(dòng)為例,講下幾種不同的緩動(dòng)處理方式2012-12-12微信小程序點(diǎn)擊滾動(dòng)到指定位置的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序點(diǎn)擊滾動(dòng)到指定位置的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05