HTML 웹 스토리지, 쿠키보다 더 좋다.
HTML 웹 스토리지란 무엇인가?
웹 스토리지를 사용하면 웹 응용 프로그램이 사용자의 브라우저 내에 로컬로 데이터를 저장할 수 있다.
HTML5 이전에는 애플리케이션 데이터가 모든 서버 요청에 포함된 쿠키에 저장되어야 했다. 웹 스토리지는 웹 사이트 성능에 영향을 미치지 않고 보다 안전하고 많은 양의 데이터를 로컬에 저장할 수 있다.
쿠키와 달리 저장소 제한은 훨씬 크고(최소 5MB) 정보는 서버로 전송되지 않는다.
웹 스토리지는 오리진별(도메인 및 프로토콜별)이다. 모든 페이지는 한 원본에서 동일한 데이터를 저장하고 액세스할 수 있다.
HTML 웹 스토리지 오브젝트(Web Storage Objects)
HTML 웹 저장소는 클라이언트에 데이터를 저장하기 위한 두 가지 개체를 제공한다:
- window.localStorage - 만료 날짜가 없는 데이터 저장
- window.sessionStorage - 한 세션에 대한 데이터를 저장합니다(브라우저 탭을 닫으면 데이터가 손실됨)
웹 스토리지를 사용하기 전에 localStorage 및 sessionStorage에 대한 브라우저 지원을 확인한다:
| if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. } |
HTML 로컬스토리지 오브젝트(localStorage Object)
localStorage 개체는 만료 날짜 없이 데이터를 저장한다. 브라우저를 닫을 때 데이터는 삭제되지 않으며 다음 날, 주 또는 연도에 사용할 수 있다.
| <!DOCTYPE html> <html> <body> <div id="result"></div> <script> // Check browser support if (typeof(Storage) !== "undefined") { // Store localStorage.setItem("lastname", "길동"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; } </script> </body> </html> |
설명된 예:
name="lastname"과 value="길동"를 사용하여 localStorage 이름/값 쌍 생성
- "성" 값을 검색하여 ID="result"로 요소에 삽입한다
- 위의 예는 다음과 같이 쓸 수도 있습니다:
아래 그림은 위의 코드를 실행한 결과 화면이다.
위의 예는 다음과 같이 쓸 수도 있다:
| // Store localStorage.lastname = "길동"; // Retrieve document.getElementById("result").innerHTML = localStorage.lastname; |
last name localStorage 항목을 제거하는 구문은 다음과 같다:
| localStorage.removeItem("lastname"); |
참고: 이름/값 쌍은 항상 문자열로 저장된다. 필요할 때 다른 형식으로 변환하는 것을 기억하세요!
다음 예제에서는 사용자가 단추를 누른 횟수를 계산합니다. 이 코드에서 값 문자열은 카운터를 늘릴 수 있는 숫자로 변환됩니다:
| <!DOCTYPE html> <html> <head> <script> function clickCounter() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = localStorage.clickcount + " 번" + " 버튼을 클릭했습니다."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>버튼을 클릭하면 카운터가 증가합니다.</p> <p>브라우저 탭(또는 창)을 닫고 다시 시도하면 카운터가 계속 카운트됩니다(재설정되지 않음).</p> </body> </html> |
위의 코드를 실행 결과 화면이다. 8번 버튼을 클릭한 실행화면이다.
세션스토리지 오브젝트(sesstionStorage Object)
sessionStorage 개체는 하나의 세션에 대한 데이터만 저장한다는 점을 제외하고 localStorage 개체와 동일하다. 사용자가 특정 브라우저 탭을 닫으면 데이터가 삭제된다.
다음 예제에서는 현재 세션에서 사용자가 단추를 클릭한 횟수를 카운트한다:
| <!DOCTYPE html> <html> <head> <script> function clickCounter() { if (typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = sessionStorage.clickcount + " 번을 이 세션에서 " + "버튼을 클릭했습니다."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; } } </script> </head> <body> <p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>버튼을 클릭하면 카운터가 증가합니다.</p> <p>브라우저 탭(또는 창)을 닫고 다시 시도하면 카운터가 재설정됩니다.</p> </body> </html> |
아래 그림은 위의 코드를 실행한 화면이다. 버튼을 3번 클릭한 실행화면이다.
지금까지 HTML에서 몇가지 스토리지에 대해서 살펴보았다. Web Storage, localStorage, sessionStorage 등에 대해서 살펴보았다.
간단한 실습이지만 꼭 실습해보세요
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML SSE API (0) | 2023.06.27 |
|---|---|
| HTML Web Workers API (0) | 2023.06.26 |
| HTML Drage and Drop API (0) | 2023.06.24 |
| HTML 위치 API(Geolocation API) (0) | 2023.06.23 |
| HTML 유튜브(Youtube) (0) | 2023.06.22 |
댓글