게임에서 처럼 Life: 3 이고 잘못된 답을 입력하면 생명력 1이 깎이고 광고를 누르면 생명력이 늘어나는 식의 개념을 구현하고 싶었다. 일단 크게 중요한 것은 아니지만 브라우저를 껐다 켜도 내용의 변화가 초기화가 되면 안되니 로컬 스토리지 기능을 이용하여 구현을 해보았다. 코드는 아래와 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> </script> </head> <body> <h2>현재 Life</h2> <div id="result"></div> <button id="up" onclick="upClick()">Up</button> <button id="down" onclick="downClick()">Down</button> </body> <script> // Check browser support if (typeof(Storage) !== "undefined") { if (!localStorage) { localStorage.setItem("life", 3); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("life"); } else { document.getElementById("result").innerHTML = localStorage.getItem("life") } function upClick() { if (Number(localStorage.getItem("life")) < 5) { localStorage.setItem("life", Number(localStorage.getItem("life")) + 1) document.getElementById("result").innerHTML = localStorage.getItem("life") } else { alert('5 이상은 할 수 없습니다.') } } function downClick() { if (Number(localStorage.getItem("life")) > 0) { localStorage.setItem("life", Number(localStorage.getItem("life")) - 1) document.getElementById("result").innerHTML = localStorage.getItem("life") } else { alert('0 이하는 할 수 없습니다.') } } } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; } </script> </html> | cs |
중요한 점이 있는데, 크롬에서만 작동한다.. 왜일까? 아직 이유를 못찾았다.(이틀전에 구현했는데 오늘 실행해보니 이런 오류가 있다 젠장할)
확인하고 고칠 생각이다. 코드도 좀 스파게티 같아서 여기서 뭔가를 더 하면 엉망 진창이 될 것 같다.
--> 깃허브에 올리고 퍼블리싱 해서 웹 상에서 접속되게 하니까 뭐 그럭저럭 잘 된다. 내가 궁금했던것은 브라우저가 각각 달라도 로컬 스토리지의 값을 공유하느냐 마느냐 였는데... 확인해보니까 각각의 브라우저 모두 고유의 로컬 스토리지가 있는 것으로 확인 되었다. 젠장!!!
코드 설명 :
일단 if 문으로 Storage가 사용 가능한지 아닌지 확인하기 위해서 (typeof(Storage) !== "undefined") 로 확인한다.
undefined가 아니라면, 다음 구문을 실행 하는 거고 만약 undefined라면 브라우저가 스토리지를 지원하지 않는다는 문장을 innerHTML으로
전달한다 ( 맨 아래에 나와있음)
그 다음 위 문장인데, localStorage에 내용이 아무것도 없다면 (!localStorage), setItem(키,값) 으로 설정한다. 여기서는 life 키로 3이라는 숫자를
(저장은 모든 값이 문자열로 저장됨) 세팅했다. 셋팅한 다음 result 라는 id를 가지고 있는 곳에 innerHTML 으로 값을 추가한다. 이 값은 getItem으로 "life"
라는 키의 값을 받아와서 집어 넣는다는 뜻이다.
만약 있다면, else 다음 구문으로, 그냥 세팅이 되있는 값을 불러와서 innerHTML으로 넣어준다는 뜻이다.
다음은 body 에 있는 up과 down 버튼을 클릭하면 어떤 동작을 할 지 설정해둔 함수들이다. up과 down 버튼을 누르면 각각 1씩
증감이 되게끔 하고 싶었다.
저기서 Number로 getItem의 값을 감싸준 이유는, 항상 storage에는 문자열로 저장이 되기 때문에, 문자열을 다시 숫자로 바꿔주기
위해서 쓴 함수이다.
그래야 숫자 비교가 되고 증감이 되기 때문에 감싸주었다.
그거 이외에는 결국 위에서 본 것과 다 똑같은 함수를 썼기 때문에 크게 어려운 점은 없어보인다.
멀리서 봤을 때는 내가 이걸 구현할 수 있을까...... 생각했었는 데 이렇게 보고 나니 그렇게 어려운 코드 구성은 아니었던 것 같다.
변수 이름 정리 하고 if 문좀 깔끔하게 구현 해서 다시 리팩토링 하여 포스팅 할 예정이다.
'JavaScript > 실습 과정' 카테고리의 다른 글
| [React] Nodebird 5.1 백엔드 서버 만들기 정리 (0) | 2020.02.14 |
|---|---|
| 태그의 class가 바뀌는 것을 catch하여 css 나 기타 내용을 변경하는 경우 (0) | 2018.03.01 |
| jQuery 구문 몇 개 정리 (0) | 2018.02.26 |
| 로컬 스토리지 이용하여 Life 구현하기 (코드 리팩토링) (0) | 2018.02.24 |
| 연화인 문제에 대해서 고찰 (0) | 2018.02.24 |