Save Game Scores using localStorage. JavaScript/CSS Game: #2.16 the hidden Gems

웹 API는 일종의 마술입니다 Storage API와 약간의 JavaScript를 사용하여 간단한 게임을 만드는 방법을 보여 드리겠습니다

[음악 연주] 안녕! 오늘 Web Storage API와 JavaScript 간의 연락에 대해 이야기 해 보겠습니다 우리는 게임에서 점수 숫자를 영구히 유지하기 위해이를 사용합니다 점수를 저장하십시오 저는 Anatol이고 FrontEnd 개발의 좋은 부분을보고 있습니다 [음악 연주] 이전 에피소드 중 하나에서 이미 간단한 게임을 만들었지 만 점수 표는 현재 세션에서만 유지됩니다

게임으로 탭을 닫으면 모든 데이터가 사라집니다 세션에 관계없이 점수를 유지하기 위해 Web Storage API 또는 쿠키 쿠키는 특정 웹 브라우저의 정보를 저장하는 데 사용되는 작은 텍스트입니다 도메인 상태 정보와 사용자의 탐색 활동을 기억하도록 설계되었습니다 JavaScript API에서 사용할 수있는 메소드는 get, getAll, set, remove, getAllCookiesStores입니다

대부분의 브라우저는 도메인 당 쿠키 50 개를 초과하지 않으며 도메인 당 4KB를 초과하지 않습니다 게다가 여러 유형의 하이재킹 사용자 데이터를 사용할 수 있습니다 (XSS, XST, XSRF) Web Storage API의 저장소 인터페이스는 세션 저장소 또는 특정 도메인의 로컬 저장소 sessionStorage는 localStorage와 유사하지만 유일한 차이점은 localStorage에는 만료 집합이 없으며 페이지가 저장 될 때 sessionStorage에 저장된 데이터가 지워집니다 세션이 끝납니다 sessionStorgare에서 다음 메소드를 찾을 수 있습니다 : key, getItem, setItem, removeItem, clear 또한 길이 속성을 사용할 수 있습니다

저장된 데이터의 한도는 브라우저마다 다르며 모바일에 따라 다릅니다 및 데스크톱 버전 또한 사용자는이 한도를 변경할 수 있습니다 W3C는이 제한을 도메인 당 5MB 값으로 설정할 것을 권장합니다 또한 "jsperf"메트릭에 따르면 localStorage는 쿠키보다 빠르게 작동합니다

따라서, 내 선택은 분명하다 나는 localStorage를 선호한다 코드를 보자 [음악 연주] 구현은 매우 쉽습니다 localStorage가 사용 가능한지 확인하십시오

그렇다면 "득점 – 점수"항목을 얻으십시오 그것에서 null이 아닌 경우 Best Scores 테이블에 사용하십시오 이제 게임이 끝나면 "Fap-Scores"항목에 보관 된 업데이트 된 점수를 localStorage에 저장하십시오 그렇게 간단합니다

페이지를 다시로드 해 봅시다 예, 점수는 그대로 있습니다 그래서 그게 전부입니다 다른 웹 API와 약간의 자바 스크립트를 조합하여 직접 만들 수 있습니다 작은 멋진 게임

진정해, 안 그래? [음악 연주] 내 코드는 인터넷에서 사용할 수있는 GitHub 문서에 있습니다 더 많은 정보를 얻으려면 열심히 노력하십시오 [음악 연주] 이 비디오가 마음에 들면 "좋아요"하고 친구와 공유하거나 다른 에피소드를 시청하고 시청하십시오 [음악 연주] 이번 주 동안의 모든 것입니다 보고 지켜봐 주셔서 감사합니다