快捷導(dǎo)航

js利用cookie實(shí)現(xiàn)記住用戶頁(yè)面操作

更新時(shí)間：2021年03月15日 11:28:03 作者：一起隨緣

這篇文章主要給大家介紹了關(guān)于js利用cookie實(shí)現(xiàn)記住用戶頁(yè)面操作的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

開發(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操作