웹 스토리지 · 오디오/비디오 완전 정리

 

 

Web Storage & Media

웹 스토리지 · 오디오/비디오 완전 정리

sessionStorage, localStorage, StorageEvent, audio/video 태그를 브라우저 기능 흐름으로 정리합니다.

0 오늘 분석할 코드

<input id="item" type="text">
<input id="count" type="text">
<button type="button" onclick="store()">저장</button>
<button type="button" onclick="retrieve()">검색</button>

<script>
let item = document.getElementById("item");
let count = document.getElementById("count");

function store() {
  if (!window.sessionStorage) return;
  sessionStorage.setItem(item.value, count.value);
}

function retrieve() {
  if (!window.sessionStorage) return;
  let val = sessionStorage.getItem(item.value);
  if (val == null) alert(item.value + "는 구입 리스트에 없습니다.");
  else count.value = val;
}

window.addEventListener("storage", storageEventListener, false);
function storageEventListener(e) {
  textarea.innerHTML = "key:" + e.key + "\noldValue:" + e.oldValue;
}
</script>

<audio src="media/EmbraceableYou.mp3" loop controls></audio>
<video width="300" height="200" controls>
  <source src="media/bear.mp4" type="video/mp4">
</video>

sessionStorage탭이나 창 단위로 유지되는 웹 스토리지입니다.

localStorage브라우저에 더 오래 유지되는 웹 스토리지입니다.

setItem()스토리지에 key/value 값을 저장합니다.

getItem()스토리지에서 key에 해당하는 값을 읽습니다.

StorageEvent다른 문서에서 스토리지가 변경될 때 발생하는 이벤트 객체입니다.

audio웹 페이지에 오디오 플레이어를 넣는 HTML 태그입니다.

video웹 페이지에 비디오 플레이어를 넣는 HTML 태그입니다.

sourcevideo나 audio의 실제 미디어 파일과 타입을 지정합니다.

---

1 전체 예제의 큰 흐름

90번 폴더는 세션 스토리지, 로컬 스토리지의 storage 이벤트, 그리고 audio/video 태그를 함께 다룹니다. 서로 다른 주제처럼 보이지만 모두 브라우저가 기본 제공하는 클라이언트 기능입니다.

• sessionStorage는 현재 탭의 간단한 데이터를 저장합니다.
• localStorage는 브라우저에 남는 데이터를 저장합니다.
• storage 이벤트는 다른 탭에서 localStorage가 바뀔 때 감지합니다.
• audio와 video는 플러그인 없이 미디어를 재생합니다.

---

2 sessionStorage 쓰기

sessionStorage.setItem(key, value)는 현재 탭의 세션 스토리지에 문자열 값을 저장합니다. 원문 예제에서는 품목명을 key로, 개수를 value로 사용합니다.

sessionStorage.setItem(item.value, count.value);

입력값이 비어 있으면 빈 문자열 key가 만들어질 수 있으므로 실제 서비스에서는 저장 전에 값을 검사하는 편이 좋습니다.

---

3 sessionStorage 읽기

getItem은 저장된 값이 없으면 null을 반환합니다. null 여부를 확인해서 없는 품목이면 alert를 띄우고, 있으면 count input에 다시 넣습니다.

1. 사용자가 품목명을 입력합니다.
2. 검색 버튼이 retrieve 함수를 호출합니다.
3. sessionStorage.getItem(item.value)로 값을 찾습니다.
4. null이면 안내하고, 값이 있으면 count.value에 넣습니다.

---

 

반응형

 

4 sessionStorage와 localStorage 차이

구분	sessionStorage	localStorage
유지 범위	탭 또는 창 세션	브라우저 저장소
탭 공유	일반적으로 공유하지 않음	같은 출처에서 공유
사용 예	임시 입력값	사용자 설정, 장바구니 초안
삭제 시점	탭 종료 시	직접 삭제 전까지

---

5 localStorage 저장과 검색

localStorage 예제도 setItem과 getItem 흐름은 sessionStorage와 거의 같습니다. 차이는 저장 영역이 더 오래 유지되고, 같은 출처의 다른 탭에서도 접근할 수 있다는 점입니다.

• window.localStorage 지원 여부를 먼저 확인합니다.
• setItem으로 품목명과 개수를 저장합니다.
• getItem 결과가 null이면 없는 값으로 처리합니다.
• 같은 브라우저의 같은 출처 페이지에서 값을 공유할 수 있습니다.

---

6 storage 이벤트

storage 이벤트는 현재 문서가 아닌 다른 문서에서 localStorage가 변경될 때 유용합니다. 예를 들어 같은 페이지를 두 탭에 열고 한쪽에서 저장하면 다른 쪽에서 이벤트 상세를 볼 수 있습니다.

속성	의미	예시
key	변경된 키	apple
oldValue	변경 전 값	2
newValue	변경 후 값	5
storageArea	변경된 저장소	localStorage
url	변경을 일으킨 문서 URL	현재 페이지 주소

---

7 StorageEvent 출력 방식

원문 예제는 이벤트 객체의 key, oldValue, newValue, storageArea, url을 문자열로 조합해 textarea에 출력합니다. 디버깅용으로 좋은 구조입니다.

let eventDetail = "key:\t" + e.key + "\n" +
  "oldValue:\t" + e.oldValue + "\n" +
  "newValue:\t" + e.newValue;

---

8 오디오 태그

audio 태그는 src로 오디오 파일을 지정하고 controls를 붙이면 브라우저 기본 플레이어를 보여줍니다. loop는 재생이 끝난 뒤 다시 시작하게 합니다.

속성	역할
src	오디오 파일 경로
controls	재생, 일시정지, 볼륨 UI 표시
loop	반복 재생
autoplay	자동 재생 시도, 브라우저 정책 영향 있음

---

9 비디오 태그

video 태그는 width와 height로 표시 크기를 지정하고, source 태그로 파일과 MIME 타입을 제공합니다. 브라우저가 지원하지 않으면 태그 내부의 대체 문구가 보입니다.

• controls를 붙이면 기본 조작 UI가 나타납니다.
• source의 type은 video/mp4처럼 MIME 타입을 적습니다.
• 여러 source를 넣으면 브라우저가 재생 가능한 파일을 선택합니다.
• width와 height는 화면 표시 크기이며 원본 해상도와 다를 수 있습니다.

---

10 지원 여부 확인

스토리지는 window.sessionStorage나 window.localStorage가 있는지 확인합니다. 미디어 태그는 대부분 최신 브라우저에서 지원하지만, 파일 형식과 코덱 지원 여부가 더 중요합니다.

기능	확인 방법	실패 처리
sessionStorage	if (!window.sessionStorage)	alert 후 return
localStorage	if (!window.localStorage)	alert 후 return
audio	태그 내부 대체 문구	지원하지 않는다는 문구 표시
video	source 타입과 대체 문구	다른 포맷 제공

---

11 실전 개선 포인트

개선	이유
입력값 검증	빈 key 저장을 막습니다.
JSON 사용	여러 값을 하나의 객체로 저장할 수 있습니다.
removeItem 추가	저장된 품목을 삭제할 수 있습니다.
storage 이벤트 로그 누적	변경 이력을 확인할 수 있습니다.
여러 미디어 source	브라우저 호환성을 높입니다.

---

12 검증 체크리스트

• 저장 버튼과 검색 버튼은 type="button"으로 둡니다.
• 스토리지 API를 쓰기 전에 지원 여부를 확인합니다.
• getItem 결과 null을 별도로 처리합니다.
• storage 이벤트는 같은 탭에서 바로 발생하지 않는다는 점을 기억합니다.
• audio와 video 파일 경로가 실제 위치와 일치하는지 확인합니다.
• video source에는 가능한 type 속성을 함께 적습니다.

---

M 자주 하는 실수

실수	문제	해결
storage 이벤트를 같은 탭에서 기다림	현재 탭의 setItem만으로는 기대한 이벤트가 보이지 않을 수 있습니다.	다른 탭에서 같은 출처 페이지를 열어 테스트합니다.
getItem null 처리를 생략	없는 품목을 검색할 때 빈 값처럼 보여 혼동됩니다.	val == null 조건을 먼저 확인합니다.
빈 품목명을 저장	빈 문자열 key가 만들어질 수 있습니다.	저장 전에 item.value.trim()을 검사합니다.
미디어 파일 경로 오류	플레이어는 보이지만 재생되지 않습니다.	src와 source 경로를 실제 파일 위치에 맞춥니다.
localStorage와 sessionStorage를 혼동	데이터 유지 시간이 예상과 다릅니다.	임시는 sessionStorage, 유지 데이터는 localStorage를 씁니다.

핵심 한 줄 요약

storage웹 스토리지는 문자열 key/value를 브라우저에 저장하는 간단한 저장소입니다.

eventStorageEvent는 다른 문서의 localStorage 변경을 감지할 때 의미가 큽니다.

mediaaudio와 video는 controls, source, type, 대체 문구를 함께 이해하면 됩니다.

Tags

#JavaScript#sessionStorage#localStorage#StorageEvent#audio#video#HTML5#setItem#getItem#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, sessionStorage, localStorage, StorageEvent, audio, video, HTML5, setItem, getItem, 티스토리