들어가며
로컬 스토리지와 세션 스토리지는 HTML5 부터 추가된 웹 스토리지의 종류로 서버가 아니라 클라이언트에서 데이터를 저장할 수 있다.
이번 포스팅에서는 로컬 스토리지와 세션 스토리지에 대해서 다루도록 하겠다.
웹 스토리지(Web Storage)
웹 스토리지(Web Storage) 는 브라우저가 제공하는 클라이언트 측 저장소다.
데이터는 키-값(key-value) 쌍으로 저장하며, 문자열 형태로 저장된다.
- 데이터 저장 시 : JSON.stringify(배열/객체)
- 데이터 사용 시 : JSON.parse(문자열배열/객체)
서버와의 통신 없이 데이터를 읽고 쓸 수 있어 빠르고 간단하게 사용할 수 있다.
웹 스토리지는 쿠키와 유사하지만 용량이 훨씬 크다.(쿠키 : 4KB / 웹 스토리지 : 약 5MB)
서버와 독립적으로 브라우저에 데이터를 저장할 수 있는 기능을 제공한다.
또한, 모든 HTTP 요청마다 전송되어 성능을 저하를 일으킬 수 있는 쿠키와 달리 서버에 전송되지 않는다.
웹 스토리지는 클라이언트 저장소이므로 쉽게 접근 가능하다.
따라서 민감한 데이터를 저장하기는 부적절하다.
민감한 데이터는 암호화하거나 서버에만 관리하는 것이 좋다.
웹 스토리지의 종류에는 로컬 스토리지와 세션 스토리지가 있다.
로컬 스토리지(Local Storage)
로컬 스토리지는 데이터를 명시적으로 삭제하지 않는 이상 브라우저를 닫아도 데이터가 유지된다.
같은 PC, 같은 브라우저 일 경우 데이터가 계속 유지된다는 뜻이다.
또 도메인 기반이라 동일한 도메인에서만 데이터에 접근이 가능하다.
사용 메서드
- 값 설정 : setItem(key, value)
- 값 읽기 : getItem(key)
- 전체 지우기 : clear()
- 키 번호 읽기 : ket(index)
- 개별 항목 삭제 : removeItem(key)
- 개수 : length
예시 코드
로컬 스토리지를 활용해서 서버에 저장하지 않고 클라이언트에서만 todo list 를 구현해보고자 한다.
코드는 노마드 코더 강의를 참고했다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Todo</h1>
<form>
<label for="todo">할 일</label>
<input type="text" id="todo" name="todo" />
<button type="submit">등록</button>
<button type="button" class="all-delete">댓글 모두 지우기</button>
</form>
<ul class="todo-list"></ul>
</body>
<script src="./index.js"></script>
</html>
index.js
// 대상요소 잡기
const form = document.querySelector("form");
const todoInput = form.querySelector("#todo");
const todoList = document.querySelector(".todo-list");
const allDeleteBtn = document.querySelector(".all-delete");
const TODO = "todo";
let todoObj = [];
// 폼요소 제출 이벤트
form.addEventListener("submit", handleSubmit);
let savedTodo = localStorage.getItem(TODO);
// 폼요소 제출 이벤트 함수
function handleSubmit(event) {
// 이벤트 기본 기능 막기
event.preventDefault();
// 빈값인지 확인
if (todoInput.value.trim() == "") {
alert("내용을 입력해주세요");
return;
}
// 로컬스토리지에 내용 저장
handleSave(todoInput.value);
todoInput.value = "";
todoInput.focus();
}
// 로컬스토리지 댓글 내용 저장
function handleSave(content) {
// 새로운 객체 생성
let newTodo = {
text: content,
id: Date.now(),
};
// 새로 추가된 내용 배열에 추가
todoObj.push(newTodo);
// li추가 함수
todoWrite(newTodo);
// json형태로 로컬스토리지에 저장
todoLocalSave();
}
function todoLocalSave() {
localStorage.setItem(TODO, JSON.stringify(todoObj));
}
// li에 댓글내용 입력을 위한 함수
function todoWrite(comment) {
const li = document.createElement("li");
li.id = comment.id;
const span = document.createElement("span");
span.innerText = comment.text;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteTodo);
li.appendChild(span);
li.appendChild(button);
todoList.appendChild(li);
}
// 로컬스토리지에 있던거 화면에 출력하기
if (savedTodo !== null) {
const parsedTodo = JSON.parse(savedTodo);
todoObj = parsedTodo;
todoObj.forEach(todoWrite);
}
// 모두 지우기
allDeleteBtn.addEventListener("click", deleteAll);
function deleteAll() {
localStorage.clear();
const li = todoList.querySelectorAll("li");
li.forEach((li) => li.remove())
}
// todo 지우기
function deleteTodo(event) {
const li = event.target.parentElement;
todoObj = todoObj.filter((todo) => todo.id !== parseInt(li.id));
li.remove();
todoLocalSave();
}
결과
이런식으로 로컬 스토리지에 저장되어서
새로고침을 하거나 브라우저를 닫았다가 켜도
작성했던 todo 내용을 지우지 않는 한 그대로 남아있어서 다시 불러올 수 있다.
활용 사례
장기적으로 유지해야하는 데이터를 저장하는 편이다
예를 들어 사용자 설정이나, 캐싱 정보 등이 있다.
세션 스토리지(Session Storage)
세션 스토리지는 로컬 스토리지와는 달리 브라우저 창이 닫히면 데이터도 사라진다.
사용하는 메서드는 로컬 스토리지와 동일하다.
활용 사례
임시 데이터를 저장하는 것에 사용한다.
예를 들어 임시 폼 데이터나, 인증 정보 등이 있다.
로컬 스토리지와 세션 스토리지 비교
로컬 스토리지와 세션 스토리지를 비교하면 다음과 같다.
| 항목 | 로컬 스토리지 | 세션 스토리지 |
| 데이터 지속성 | 브라우저를 닫아도 지속 (명시적으로 지우거나 캐시 데이터를 지우지 않는 이상 지속됨) |
브라우저 창을 닫으면 데이터 삭제됨 |
| 사용 목적 | 장기적으로 유지해야 할 데이터 (예 : 사용자 설정, 캐싱 데이터) |
일회성 또는 세션 동안만 필요한 데이터 (예 : 폼 임시 저장) |
| 삭제 시점 | 명시적으로 삭제하거나 브라우저 캐시 삭제 시 | 브라우저 창을 닫으면 삭제 |
| 활용 사례 | 사용자 설정, 캐시 정보 등 | 인증 세션 데이터, 임시 폼 데이터 등 |
Reference
https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80
웹 스토리지 - 위키백과, 우리 모두의 백과사전
위키백과, 우리 모두의 백과사전.
ko.wikipedia.org
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
Web Storage API - Web API | MDN
Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.
developer.mozilla.org
https://www.w3schools.com/js/js_api_web_storage.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://www.youtube.com/watch?v=-4Sa7nTrXr4
'Study > Javascript' 카테고리의 다른 글
| [JS] Set 객체를 이용한 중복 요소 제거 (0) | 2024.08.15 |
|---|---|
| [JS] 자바스크립트의 this (0) | 2024.08.07 |
| [JS] 배열에서 사용하는 메서드 (2) (0) | 2024.08.05 |
| [JS] 배열에서 사용하는 메서드 (1) (0) | 2024.08.04 |
| [새싹x코딩온] 웹 개발자 부트캠프 과정 4주차 회고 | 자바스크립트 Date 객체를 이용해서 시계와 달력을 만들어보기 (1) | 2024.06.04 |