LocalStorage란?
LocalStorage는 브라우저에서 데이터를 저장할 수 있는 HTML5 Web Storage API 중 하나입니다. 이 API를 사용하면 사용자의 로컬 브라우저에 데이터를 저장하고 나중에 가져올 수 있습니다.
LocalStorage 사용하기
LocalStorage를 사용하려면 먼저 LocalStorage 객체를 만들어야 합니다. 이 객체는 브라우저에서 전역으로 사용할 수 있으며, 데이터를 저장하고 가져오는데 사용됩니다.
데이터 저장하기
LocalStorage를 사용하여 데이터를 저장하려면 setItem() 메서드를 사용합니다. 이 메서드는 두 개의 인수를 받으며, 첫 번째 인수는 저장할 데이터의 이름(키), 두 번째 인수는 저장할 데이터입니다.
localStorage.setItem('이름', '값');'이름' 키로 '값' 데이터를 저장하는 예시
localStorage.setItem('이름', '철수');데이터 가져오기
LocalStorage에서 데이터를 가져오려면 getItem() 메서드를 사용합니다. 이 메서드는 하나의 인수, 즉 가져올 데이터의 이름(키)를 받습니다.
localStorage.getItem('이름');'이름' 키에서 저장된 데이터를 가져오는 예시
localStorage.getItem('이름');
// 출력: 철수데이터 삭제하기
LocalStorage에서 데이터를 삭제하려면 removeItem() 메서드를 사용합니다. 이 메서드는 하나의 인수, 즉 삭제할 데이터의 이름(키)를 받습니다.
localStorage.removeItem('이름');'이름' 키에서 저장된 데이터를 삭제하는 예시
localStorage.removeItem('이름');모든 데이터 삭제하기
LocalStorage에서 저장된 모든 데이터를 삭제하려면 clear() 메서드를 사용합니다.
localStorage.clear();위 코드는 모든 데이터를 삭제합니다.
LocalStorage 사용 예시
LocalStorage를 사용하여 간단한 To-Do List를 만들어보겠습니다. 이 예시에서는 사용자가 입력한 데이터를 LocalStorage에 저장하고, 이전에 저장된 데이터를 불러와 화면에 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form id="toDoForm">
<input type="text" id="toDoInput" placeholder="할 일을 입력하세요">
<button type="submit">추가</button>
</form>
<ul id="toDoList"></ul>
<script>
const form = document.querySelector('#toDoForm');
const input = document.querySelector('#toDoInput');
const list = document.querySelector('#toDoList');
// LocalStorage에서 데이터를 가져와 화면에 보여주는 함수
function displayData() {
// LocalStorage에서 toDoList 데이터 가져오기
const toDoList = JSON.parse(localStorage.getItem('toDoList')) || [];
// 가져온 데이터를 화면에 보여주기
list.innerHTML = toDoList.map(todo => `<li>${todo}</li>`).join('');
}
// submit 이벤트 리스너
form.addEventListener('submit', event => {
event.preventDefault();
// 입력된 데이터를 가져오기
const todo = input.value;
// LocalStorage에서 toDoList 데이터 가져오기
const toDoList = JSON.parse(localStorage.getItem('toDoList')) || [];
// 입력된 데이터를 LocalStorage에 저장
toDoList.push(todo);
localStorage.setItem('toDoList', JSON.stringify(toDoList));
// 입력 필드 초기화
input.value = '';
// 화면에 데이터 보여주기
displayData();
});
// 초기화 함수 호출
displayData();
</script>
</body>
</html>To-Do List를 구현한 예시입니다. localStorage.getItem('toDoList')를 사용하여 LocalStorage에서 toDoList 데이터를 가져옵니다. 이 데이터를 JSON.parse()를 사용하여 배열로 변환한 후, map()과 join 메서드를 사용하여 각 항목을 <li> 요소로 변환하여 화면에 데이터를 보여줍니다.
결론
LocalStorage는 브라우저에서 데이터를 저장하고 가져올 수 있는 HTML5 Web Storage API 중 하나입니다. localStorage.setItem(), localStorage.getItem(), localStorage.removeItem(), localStorage.clear()를 사용하여 데이터를 저장, 가져오고 삭제할 수 있습니다. 이를 활용하여 다양한 기능을 구현할 수 있습니다.
'javascript' 카테고리의 다른 글
| javascript 함수의 이해 (0) | 2023.03.08 |
|---|---|
| while문의 이해(반복문) (0) | 2023.02.15 |
| 반복문 for문 (0) | 2023.02.08 |
| javascript 조건문 if와 switch문 (0) | 2023.02.01 |
| javascript 연산자 (0) | 2023.01.16 |