JS/브라우저 히스토리 관리 (replaceState, pushState)

ajax 등 비동기로 데이터 뿌린 후 history back 등에서 의해서 파라미터를 유지해야할 경우

매번 만들어서 사용하기 귀찮아서 기록해 둔다.

 

UTIL

/**
 * History Object
 */
CORE.HISTORY = {
    // history parameter
    getFormParams: function (options) {
        var sFrmSelector = CORE.nvl2(options['frmSelector'], '');
        var aReplaceItems = options['replaceItems'];
        var aFrmParams = $(sFrmSelector).serializeArray();

        if (sFrmSelector !== '' && Object.keys(aReplaceItems).length > 0) {
            aFrmParams.map(function (item) {
                Object.keys(aReplaceItems).forEach(function (sId) {
                    if (item.name == sId) {
                        item.value = aReplaceItems[sId];
                    }
                });
            });
        }

        return $.param(aFrmParams);
    },
    // history parameter
    getElementParams: function (options) {
        var aParams = options['params'];
        var aReplaceItems = options['replaceItems'];

        if (Object.keys(aReplaceItems).length > 0) {
            aParams.map(function (item) {
                Object.keys(aReplaceItems).forEach(function (sId) {
                    if (item.name == sId) {
                        item.value = aReplaceItems[sId];
                    }
                });
            });
        }

        return decodeURIComponent($.param(aParams));
    },
    // history replace
    replaceState: function (options) {
        var oData = CORE.nvl2(options['data'], null);
        var sTitle = CORE.nvl2(options['title'], null);
        var sUrl = CORE.nvl2(options['url'], window.location.pathname);
        var sGetParams = CORE.nvl2(options['params'], '');
        sUrl = sUrl + (sGetParams === '' ? '' : '?' + sGetParams);

        history.replaceState(oData, sTitle, sUrl);
    }
};

 

사용방법

// 히스토리 파라미터 설정
var sParams = CORE.HISTORY.getFormParams({
    'frmSelector': SELLER_LIST.frmSelector,
    'replaceItems': {
        'seller_no': ''
    },
});

// 히스토리 변경
CORE.HISTORY.replaceState({'params': sParams});

 

pushState로 하는부분은 다른프로젝트에서 사용한거라서 귀찮으니 나중에 정리해야겠다.