웹 스토리지 실습 완전 정리

 

 

Web Storage Practice

웹 스토리지 실습 완전 정리

sessionStorage 이름/학번 저장·검색과 localStorage 포스트잇 저장·출력을 실습 흐름으로 정리합니다.

0 오늘 분석할 코드

<script>
function store() {
  if (!window.sessionStorage) {
    alert("지원하지 않습니다.");
    return;
  }
  let name = document.getElementById("name").value;
  let sid = document.getElementById("sid").value;
  sessionStorage.setItem(name, sid);
}

function search() {
  if (!window.sessionStorage) return;
  let name = document.getElementById("name").value;
  let sid = sessionStorage.getItem(name);
  if (sid == null) alert(name + " 학생이 없습니다.");
  else document.getElementById("sid").value = sid;
}

function saveMemo() {
  let title = document.getElementById("title").value;
  let memo = document.getElementById("memo").value;
  localStorage.setItem(title, memo);
}
</script>

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

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

setItem()key와 value를 저장합니다.

getItem()key에 해당하는 value를 읽습니다.

key()인덱스 번호로 localStorage의 key를 가져옵니다.

length스토리지에 저장된 항목 개수입니다.

window.open()새 창이나 새 탭을 여는 메서드입니다.

document.write()문서에 HTML 문자열을 직접 출력합니다.

---

1 실습 전체 흐름

95번 폴더는 이름과 학번을 sessionStorage에 저장하고 검색하는 실습, 제목과 메모를 localStorage에 저장한 뒤 별도 페이지에서 출력하는 포스트잇 실습으로 구성됩니다.

• 이름/학번 저장 페이지는 sessionStorage.setItem(name, sid)를 사용합니다.
• 이름 검색 페이지는 sessionStorage.getItem(name)을 사용합니다.
• 포스트잇 입력 페이지는 localStorage.setItem(title, memo)를 사용합니다.
• 포스트잇 출력 페이지는 localStorage.length와 key(i)로 전체 항목을 순회합니다.

---

2 sessionStorage 저장 페이지

첫 번째 페이지는 이름과 학번을 입력받아 이름을 key, 학번을 value로 저장합니다. 같은 탭 흐름에서 검색 페이지로 이동하면 저장된 값을 읽을 수 있습니다.

입력	스토리지 역할	예시
name	key	홍길동
sid	value	20260001
저장 버튼	store 호출	setItem 실행
검색 링크	다른 페이지 이동	prac12-01-search.html

---

3 원문 코드의 깨진 부분

원문에는 함수 이름 자리에 로컬 경로가 섞인 깨진 문자열이 있습니다. 실제 의도는 function store()입니다. 이런 경우에는 주변의 onclick="store()"와 코드 흐름을 보고 원래 함수명을 복원해서 이해합니다.

function store() {
  if (!window.sessionStorage) {
    alert("지원하지 않습니다.");
    return;
  }
  sessionStorage.setItem(name, sid);
}

---

 

반응형

 

4 sessionStorage 검색 페이지

검색 페이지는 이름을 입력받아 sessionStorage.getItem(name)으로 학번을 찾습니다. 결과가 null이면 해당 학생이 없다는 alert를 띄우고, 값이 있으면 sid input에 채웁니다.

1. 검색할 이름을 입력합니다.
2. 검색 버튼이 search 함수를 호출합니다.
3. getItem(name)으로 저장된 학번을 찾습니다.
4. null이면 안내하고 종료합니다.
5. 값이 있으면 검색된 학번 입력칸에 대입합니다.

---

5 sessionStorage의 범위

sessionStorage는 현재 탭이나 창의 세션에 묶입니다. 같은 브라우저라도 새 탭에서 바로 공유된다고 기대하면 안 됩니다. 학습 예제처럼 저장 페이지에서 검색 페이지로 이동하는 흐름에 적합합니다.

상황	결과
같은 탭에서 페이지 이동	값 유지
탭 새로고침	값 유지
탭 닫기	세션 종료로 값 삭제
다른 탭	일반적으로 별도 세션

---

6 포스트잇 저장

포스트잇 입력 페이지는 제목과 메모를 localStorage에 저장합니다. 제목이 key가 되고 메모 내용이 value가 됩니다. 보기 버튼은 window.open으로 출력 페이지를 엽니다.

• title input은 localStorage key가 됩니다.
• memo textarea는 localStorage value가 됩니다.
• 저장 버튼은 localStorage.setItem(title, memo)를 실행합니다.
• 보기 버튼은 prac12-03-view.html을 새 창으로 엽니다.

---

7 window.open 사용

view 함수는 window.open("prac12-03-view.html", "viewwin")을 호출합니다. 두 번째 인수 viewwin은 창 이름이라 같은 이름으로 다시 열면 기존 창을 재사용할 수 있습니다.

인수	의미	예시
URL	열 페이지	prac12-03-view.html
name	창 이름	viewwin
features	창 옵션	생략 가능
반환값	새 창 객체	필요 시 제어 가능

---

8 localStorage 전체 출력

출력 페이지는 localStorage.length만큼 반복하면서 key(i)로 각 key를 얻고 getItem(key)로 값을 읽습니다. 그 결과를 table 행으로 document.write합니다.

for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  let val = localStorage.getItem(key);
  document.write("<tr>");
  document.write("<th>" + key + "</th>");
  document.write("<td>" + val + "</td>");
  document.write("</tr>");
}

---

9 sessionStorage와 localStorage 비교

구분	sessionStorage	localStorage
유지 시간	탭 세션 동안	직접 삭제 전까지
예제	이름과 학번 검색	포스트잇 메모
공유 범위	탭 중심	같은 출처 중심
적합한 데이터	임시 입력값	사용자 설정, 간단 메모

---

10 입력값 검증

원문은 입력값이 비어 있어도 저장합니다. 실제로는 key가 빈 문자열이면 나중에 찾기 어렵고, 같은 제목을 다시 저장하면 덮어쓰기 때문에 저장 전 검증이 필요합니다.

• name.trim()이 빈 문자열이면 저장하지 않습니다.
• sid.trim()이 빈 문자열이면 학번 입력을 요청합니다.
• title이 이미 있으면 덮어쓸지 확인합니다.
• memo가 너무 길면 표시 방식을 조정합니다.

---

11 보안과 출력 주의

document.write로 사용자가 입력한 key와 value를 그대로 출력하면 HTML이 해석될 수 있습니다. 학습 예제로는 흐름을 보기 쉽지만, 실제 서비스에서는 textContent나 DOM API로 안전하게 출력해야 합니다.

스토리지는 브라우저에 저장되는 클라이언트 데이터입니다. 비밀번호, 주민번호, 토큰 같은 민감한 값은 그대로 넣지 않습니다.

---

12 개선 과제

과제	목표
삭제 버튼	removeItem으로 특정 메모를 지웁니다.
전체 삭제	clear로 모든 메모를 지웁니다.
JSON 저장	이름, 날짜, 내용 객체를 문자열로 저장합니다.
검색 필터	제목 일부로 포스트잇을 찾습니다.
DOM 출력	document.write 대신 createElement를 사용합니다.

---

13 검증 체크리스트

• store 함수 이름이 onclick과 정확히 일치합니다.
• 스토리지 지원 여부를 먼저 확인합니다.
• setItem의 key와 value 역할을 구분합니다.
• getItem 결과가 null일 때를 처리합니다.
• localStorage 순회는 length와 key(i)를 함께 사용합니다.
• 사용자 입력을 화면에 출력할 때 HTML 삽입 위험을 고려합니다.

---

M 자주 하는 실수

실수	문제	해결
함수명이 깨진 상태로 둠	onclick store와 실제 함수명이 맞지 않아 저장이 안 됩니다.	function store()로 복원합니다.
빈 key 저장	나중에 검색하거나 구분하기 어렵습니다.	trim 검사 후 저장합니다.
sessionStorage를 새 탭 공유로 기대	탭 세션 범위 때문에 값이 없을 수 있습니다.	같은 탭 흐름에서 테스트합니다.
localStorage 전체 출력에 document.write 남용	사용자 입력 HTML이 실행될 수 있습니다.	DOM API와 textContent를 사용합니다.
같은 제목 덮어쓰기 미인지	기존 메모가 사라진 것처럼 보입니다.	저장 전 기존 key 여부를 확인합니다.

핵심 한 줄 요약

sessionsessionStorage는 같은 탭 흐름의 이름/학번 저장과 검색에 적합합니다.

locallocalStorage는 포스트잇처럼 브라우저에 오래 남길 간단한 데이터에 적합합니다.

iteratelocalStorage 전체 출력은 length, key(i), getItem(key) 조합으로 순회합니다.

Tags

#JavaScript#sessionStorage#localStorage#WebStorage#setItem#getItem#window.open#document.write#Post-it#티스토리

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

JavaScript, sessionStorage, localStorage, WebStorage, setItem, getItem, window.open, document.write, Post-it, 티스토리