[JS] document.cookie 사용 이슈 및 해결 방법

// 고유 key name 쿠키 생성 함수
// 여러 Tab 동시 오픈시 데이터 조회 에러 대응 > document.cookie의 비동기적 방식에 의한 현상
function setRareCookie(cookieValue, expireDate, uri) {
    checkAndDeleteCookie(); // 총 크기 체크. 기준치 이상인 경우 가장 오래된 쿠키 삭제하는 함수
    let cookieName = randomNum(); // 쿠키의 고유 key name 생성 
    changeBrowserLocation(cookieName); // key name을 URL에 설정
    document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expireDate + ";path=" + uri;
    return cookieName;
}

// URL에 있는 dataKey를 Key Name으로 갖는 쿠키 조회
function getRareCookie() {
    let cookieName = getDataKey();
    let cookie = document.cookie;
    if (cookie.length > 0 && !isEmpty(cookieName)) {
        let startIndex = cookie.indexOf(cookieName);
        if (startIndex != -1) {
            startIndex += cookieName.length;
            let endIndex = cookie.indexOf(";", startIndex);
            if (endIndex == -1) endIndex = cookie.length;
            return unescape(cookie.substring(startIndex + 1, endIndex));
        } else {
            return '';
        }
    } else {
        return '';
    }
}

// 쿠키 삭제
function deleteRareCookie(uri) {
    let expireDate = new Date();
    expireDate.setDate(expireDate.getDate() - 1);
    document.cookie = getDataKey() + "= " + ";expires=" + expireDate.toGMTString() + ";path=" + uri;
}

// URL의 QueryString 중 dataKey 유무 확인
function getDataKey(){
    let dataKey = new URL(location.href).searchParams.get('dataKey') || '';
    return dataKey;
}

// 화면 이동시 URL에 cookie key name 전달
function getDataKeyUrl(delimiter){
    let dataKey = getDataKey();
    return dataKey && `${delimiter}dataKey=${dataKey}`;
}

function randomNum(){
    let randomNum = String(Math.floor(Math.random() * 10000));
    let currDateTime = String(new Date().getTime()).substring(3);
    return currDateTime + randomNum;
}

// 쿠키의 총 크기 반환 함수
function getCookieSize() {
    let totalSize = 0;
    let cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        totalSize += cookie.length * 2; // 쿠키의 길이 2배(유니코드 문자 고려)
    }
    return totalSize;
}

// 총 크기를 체크하여 기준치 이상인 경우 가장 오래된 쿠키 삭제
function checkAndDeleteCookie() {
    let maxSize = 8500;

    while (getCookieSize() > maxSize) {
        let cookies = document.cookie.split('; ');
        let oldestCookie = 0;
        let firstOfAll = true;
        let deleteTargetCookieName = 0;

        for (let i = 0; i < cookies.length; i++) {
            let keyName = cookies[i].substring(0, cookies[i].indexOf('='));
            if(!isNumericString(keyName)) continue;
            let keyName_dateTime = parseInt(keyName.substring(0,10));

            if(firstOfAll) {
                oldestCookie = keyName_dateTime;
                deleteTargetCookieName = keyName;
                firstOfAll = false;
                continue;
            }

            if(oldestCookie > keyName_dateTime){
                oldestCookie = keyName_dateTime;
                deleteTargetCookieName = keyName;
            }
        }

        if(firstOfAll) break; // 삭제할 쿠키 없는 경우 break
        document.cookie = deleteTargetCookieName + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
    }
}

function isNumericString(str) {
    let pattern = /^\d+$/;
    return pattern.test(str);
}

// 고유 key name을 URL에 설정
function changeBrowserLocation(dataKey){
    let params = new URLSearchParams(location.search);
    params.set('dataKey', dataKey);
    let queryString = params.toString();
    let url = location.pathname + '?' + queryString;
    window.history.replaceState({}, document.title, url);
}

// 쿠키 조회 후 화면에 데이터 세팅
화면시작시실행되는초기화함수 : function(){
	this.searchCondition = getRareCookie();
	if(this.searchCondition != '') {
		...
		(화면 inputbox에 setting 변수 초기화)
		...
		deleteRareCookie("/");
	}
}

...

// 상세페이지로 이동
화면이동함수 : function(){
	...
	let dataKey = setRareCookie({다음화면에 전달할 JSON 데이터}, expireDate, "/");
	window.location.href = "{상세페이지URL}?dataKey=" + dataKey;
}

뒤로가기함수 : function() {
	window.location.href = "{목록페이지URL}" + getDataKeyUrl("?");
}