자바스크립트로 방문기록 구현

<script>
		var mainPageUrl = window.location.href;	
		var menuList = document.getElementById('menu-list');
		var menuItems = menuList.getElementsByTagName('li');
		var maxItems = 4; // 최대 아이템 개수
		var maxStoredUrls = 10; // 최대 저장 가능한 URL 개수
		var clickedUrl;
		
		// 방문 기록을 저장할 스택
		var historyStack = [];
		
		// isMainPage를 여기서 정의
		var isMainPage = menuList !== null;
		
		// 중복된 URL인지 확인
		function isDuplicateUrl(url) {
		for (var i = 0; i < menuItems.length; i++) {
		var menuItemLink = menuItems[i].getElementsByTagName('a')[0].href;
				if (menuItemLink === url) {
					return true;
				}
			}return false;
		}
		
		// 방문한 페이지를 스택에 추가하고 히스토리 업데이트
		function visit(pageName, url) {
		clickedUrl = url;
		
		// 짧게 표시할 명칭 길이 (원하는 길이로 조절)
		var shortPageName = getShortenedPageName(pageName);
		
		if (!isDuplicateUrl(clickedUrl) && menuItems.length < maxItems && clickedUrl !== mainPageUrl) {
				var newMenuItem = document.createElement('li');
				var newLink = document.createElement('a');
				newLink.href = clickedUrl;
				
				newLink.textContent = shortPageName;
				
				newMenuItem.appendChild(newLink);
				menuList.appendChild(newMenuItem);
				
				storeUrlInSessionStorage(clickedUrl);
				historyStack.push(clickedUrl);
				updateHistory();
				}
			// 클릭한 링크로 이동
			window.location.href = clickedUrl;
		}
			
		// 클릭 이벤트 리스너 등록
		menuList.addEventListener('click', clickHandler);
		
		// 클릭 핸들러 함수
		function clickHandler(event) {
		event.preventDefault();
		var clickedLink = event.target.closest('a');
		if (clickedLink) {
			var pageName = clickedLink.innerText.trim();
			var url = clickedLink.href;
			visit(pageName, url);
			
			// 방문한 페이지가 클릭되었을 때만 방문 기록을 세션 스토리지에 저장
			storeUrlInSessionStorage(url);
			}
		}
		
		// 페이지 명칭을 짧게 표시하는 함수
		function getShortenedPageName(fullPageName) {
		// 원하는 길이로 조절
		var maxLength = 15;
		
		// "?" 전까지만 추출
		var indexOfQuestionMark = fullPageName.indexOf('?');
		var truncatedPageName = indexOfQuestionMark !== -1 ? fullPageName.slice(0, indexOfQuestionMark) : fullPageName;
		var lastSlashIndex = fullPageName.lastIndexOf('/');
		var indexOfSemicolon = fullPageName.indexOf(';');
		var finalPageName = fullPageName.slice(lastSlashIndex + 1, indexOfSemicolon !== -1 ? indexOfSemicolon : undefined);
		
		// 특정 페이지 명칭에 대한 사용자 정의 텍스트 설정
			 var customShortNames = {
			    "ntcList": "공지사항",
			    "faqList": "FAQ"
			  };

		  return customShortNames[truncatedPageName] || (truncatedPageName.length > maxLength
		    ? truncatedPageName.slice(0, maxLength) + "..."
		    : truncatedPageName);
		}
		
		
		// 이전에 저장한 URL 목록이 있다면 가져와서 추가
		if (isMainPage) {
			var savedUrls = JSON.parse(getSessionStorage('menuUrls')) || [];
				if (!Array.isArray(savedUrls)) {
				savedUrls = []; // JSON 파싱 실패 시 빈 배열로 초기화
				}
			for (var i = 0; i < savedUrls.length; i++) {
				if (i < maxItems && savedUrls[i] !== "" && savedUrls[i] !== mainPageUrl) {
				var newMenuItem = document.createElement('li');
				var newLink = document.createElement('a');
				newLink.href = savedUrls[i];
				
				newLink.textContent = getShortenedPageName(getLinkTextFromUrl(savedUrls[i]));
				
				newMenuItem.appendChild(newLink);
				menuList.appendChild(newMenuItem);
				}
			}
		}
		
		// 다른 페이지에서 메인 페이지로 돌아왔을 때 세션 스토리지에 저장된 URL을 가져와 메뉴 목록에 추가
		var previousUrl = document.referrer;
		if (isMainPage && previousUrl !== "" && previousUrl !== window.location.href && previousUrl !== mainPageUrl) {
		// 최대 저장 가능한 URL 개수를 초과하지 않는 경우에만 아이템 추가
			if (savedUrls.length < 4) {
			// 중복된 URL이 아니면 추가
				if (!isDuplicateUrl(previousUrl)) {
				var newMenuItem = document.createElement('li');
				var newLink = document.createElement('a');
				newLink.href = previousUrl;
			
				newLink.textContent = getShortenedPageName(getLinkTextFromUrl(previousUrl));
				
				newMenuItem.appendChild(newLink);
				menuList.appendChild(newMenuItem);
				
				storeUrlInSessionStorage(previousUrl);
				}
			}
		}
		
		// 세션 스토리지에 값을 저장하는 함수
		function setSessionStorage(name, value) {
			sessionStorage.setItem(name, value);
		}
		
		// 세션 스토리지에서 값을 가져오는 함수
		function getSessionStorage(name) {
			return sessionStorage.getItem(name);
		}
		
		// URL에서 링크 텍스트를 추출하는 함수
		function getLinkTextFromUrl(url) {
			var segments = url.split('/');
			return segments.length > 0 ? segments[segments.length - 1] : '';
		}
		
		// 페이지 명칭을 짧게 표시하는 함수
		function getShortenedPageName(fullPageName) {
		// 원하는 길이로 조절
		var maxLength = 15;
		
		// "?" 전까지만 추출
		var indexOfQuestionMark = fullPageName.indexOf('?');
		var truncatedPageName = indexOfQuestionMark !== -1 ? fullPageName.slice(0, indexOfQuestionMark) : fullPageName;
		var lastSlashIndex = fullPageName.lastIndexOf('/');
		var indexOfSemicolon = fullPageName.indexOf(';');
		var finalPageName = fullPageName.slice(lastSlashIndex + 1, indexOfSemicolon !== -1 ? indexOfSemicolon : undefined);

		
		// 특정 페이지 명칭에 대한 사용자 정의 텍스트 설정
			 var customShortNames = {
			    "ntcList": "공지사항",
			    "faqList": "FAQ"
			  };
	
			  return customShortNames[truncatedPageName] || (truncatedPageName.length > maxLength
			    ? truncatedPageName.slice(0, maxLength) + "..."
			    : truncatedPageName);
		}
		
		function storeUrlInSessionStorage(url) {
		var savedUrls = JSON.parse(getSessionStorage('menuUrls')) || [];
			if (!savedUrls.includes(url) && savedUrls.length < maxStoredUrls) {
			savedUrls.push(url);
			setSessionStorage('menuUrls', JSON.stringify(savedUrls));
			}
		}
		
		function getMenuUrlsFromMenuItems() {
			var menuUrls = [];
			var menuItems = menuList.getElementsByTagName('li');
				for (var i = 0; i < menuItems.length; i++) {
				var menuItemLink = menuItems[i].getElementsByTagName('a')[0].href;
				menuUrls.push(menuItemLink);
				}
			return menuUrls;
		}

	</script>

 

<div class="">
	<ul id="menu-list">
		<li><a href="<c:url value='/'/>">최근 접속 페이지</a></li>
	</ul>
</div>