JavaScript 이상형 월드컵 만들기 (3) - 초간단한 로컬스토리지를 이용한 랭킹구현하기

이상형 월드컵을 하다보면 랭킹(순위)를 볼 수 있다.

자바스크립트를 이용한 간단한 구현이기 때문에 로컬스토리지를 이용했다.

당신의 1등이 로컬스토리지이고 나머지 1등들은 그냥 코드를 넣었다 ㅜㅜ 실력이슈

 

---

저번 리뷰를 만약 봤으면 알겠지만 나는 우승자를 나타내는 함수가 winnerImage이다.

 

그래서 라운드 진행하는.html

<!-- javascript -->
localStorage.setItem('winnerImage', winnerImage);

 

랭킹을 보여주는 .html

<!-- html 부분  -->
 <img src = "" id="winnerImage">
 
 
 <!-- javascript 부분 -->
 var winnerImage = localStorage.getItem('winnerImage');
// 가져온 이미지를 화면에 표시
document.getElementById('winnerImage').src = winnerImage;

이것만 추가해주면 된다.

 

---

전체 코드 - 결승전 버전

결승전.html

See the Pen Untitled by pronambin (@kimnambin) on CodePen.

 

랭킹화면.html

See the Pen Untitled by pronambin (@kimnambin) on CodePen.