티스토리 뷰
우리가 웹 페이지에서 무엇인가 정보를 기억해야할 때, 예를 들면 쇼핑몰에서 우리가 장바구니에 담아둔 목록과 같은 정보들이 있을 때, 이러한 사용자들의 정보를 모두 웹 서버에 저장하는 것은 웹 서버의 저장 공간 뿐만 아니라 네트워크 트래픽 증가도 일으킬 수 있다. 따라서 이와 같이 필요한 정보를 웹 스토리지(Web storage) 기능을 이용해 저장하기도 한다.
웹 스토리지는 2가지 종류로 나누어 볼 수 있다.
- 세션 스토리지 (Session Storage)
- 로컬 스토리지 (Local Storage)
세션은 브라우저 창과 웹 사이트가 연결된 상황을 말하는 데, 세션 스토리지는 세션이 생길 때 생성되며, 세션이 종료될 떄 종료되는 일시적인 저장공간이다. 세션 스토리지는 한 세션 동안 주고 받는 데이터를 일시적으로 저장하기 위해 사용된다.
로컬 스토리지는 웹 서버(사이트) 당 하나씩 생성되며, 브라우저가 종료되어도 따로 삭제 시키지 않는 한 사라지지 않는다.
브라우저가 웹 스토리지를 지원하는 지 확인을 먼저 해주어야 합니다.
if(!window.sessionStorage){
//브라우저가 세션 스토리지를 지원 하지 않습니다.
alert("세션 스토리지를 지원하지 않습니다.)
}웹 스토리지는 키와 값의 쌍으로 이루어지며 크롬 브라우저의 경우 개발자 도구(F12) → Application → Storage 탭 에서 현재 스토리지에 저장된 키와 값을 확인할 수 있다.
웹 페이지가 로드되면 자동으로 세션 스토리지와 로컬 스토리지가 생성되며, window.sessionStorage 와 window.localStorage를 통해서 접근 가능하며, window는 생략 가능하다.
sessionStorage와 localStorage는 다음과 같은 메소드와 프로퍼티를 가진다.
| Property / Method | Description |
| key(n) | n번째 키를 반환 |
| length | 스토리지 객체에 저장되어있는 항목의 수를 반환 |
| getItem(keyname) | 키 이름에 해당하는 값을 반환, 키가 없는 경우 null 반환 |
| setItem(keyname, value) | 객체에 키를 추가하거나 이미 해당 키가 존재하는 경우 해당 값으로 바꿈 |
| removeItem(keyname) | 객체에서 키를 제거 |
| clear() | 저장되어 있는 모든 키를 삭제 |
또한 스토리지에 아이템을 추가, 변경, 삭제 등 을 할 경우 StorageEvent 객체가 발생한다.
| Property | Description |
| key | 변화가 발생한 아이템의 키를 반환 |
| newValue | 변화가 발생한 아이템의 새 값을 반환 |
| oldValue | 변화가 발생한 아이템의 이전 값을 반환 |
| storageArea | 이벤트가 발생한 스토리지 객체를 반환 |
| url | 변화가 발생한 페이지의 URL을 반환 |
<예제 코드>
<!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 = "You have clicked the button "
+ localStorage.clickcount + " time(s).";
} 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>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count
(is not reset).</p>
</body>
</html>'Web Programming > HTML5 CSS3' 카테고리의 다른 글
| HTML5 이벤트(Event) 개념 정리 (0) | 2019.06.25 |
|---|---|
| HTML5 웹 워커(Web worker) 기본 정리 (0) | 2019.06.23 |
| HTML5 웹 폼(web form) 구성하기 (0) | 2019.06.21 |
| CSS3 기본내용 정리 (0) | 2019.06.13 |
| 기본적인 HTML 사용방법 정리 (0) | 2019.06.11 |