JavaScript에서 Local Storage를 사용하는 방법
하수도키
·2020. 7. 17. 10:37
728x90
반응형
SMALL
JavaScript
에서 Local Storage
를 사용하는 방법
- 원글(https://tania.dev/how-to-use-local-storage-with-javascript)을 번역/의역했습니다.
서론
일반 JavaScript를 사용하여 간단하고 새로운 탭 페이지 응용 프로그램을 만들어 브라우저의 내장 웹 스토리지를 사용하는 방법에 대해 알아보자.
저는 작은 응용 프로그램을 처음부터 순수한 JavaScript로 완전히 구축하는 튜토리얼을 만드는 것을 좋아한다.
todolist은 일반적인 앱 아이디어이지만, 할 일을 저장할 데이터베이스가 없으면 그다지 유용하지 않으며, 이는 초보자 영역을 넘어서는 복잡성을 가중시킨다. 이것은 실제로 빠른 메모를 하는데 유용할 수 있다.
브라우저에서 앱을
새 탭
페이지로 설정하면 캐시를 삭제하지 않는 한 프로그램이 로컬 컴퓨터에서 유지된다.이것이 오늘 우리가 배울 것입니다.
이 기술을 습득하기 위한 전제 조건
- HTML,CSS, JavaScript기초
- DOM 기초
- API 통신하는 방법
- 목표
- 브라우저의 로컬 저장소에 작업 항목을 로컬로 저장하고 프런트 엔드에 표시하는
새 탭 페이지
응용 프로그램을 만듭니다. 완성 예제를 봅시다.(링크)
- 브라우저의 로컬 저장소에 작업 항목을 로컬로 저장하고 프런트 엔드에 표시하는
웹 스토리지 개요
- 웹 스토리지는 사용자의 브라우저에 저장되는 데이터이다.
- 이 기능은 사용자 기본 설정(웹 사이트의 밝은 색 또는 어두운 색 테마), 장바구니 담기 또는 웹 사이트에 로그인한 사용자 기억과 같은 데이터를 저장할 때 유용하다.
- 이전에는 이러한 유형의 임시 데이터를 기억하기 위한 유일한 선택이 쿠키다.
- 로컬 저장소의 저장 공간이 상당히 크며(로컬5MB vs 쿠키4KB), 모든 HTTP요청과 함께 전송되지 않으므로 클라이언트 측 저장소에 대한 더 나은 선택이 될 수 있다.(쿠키는 HTTP요청과 함께 전송)
- 다음은
localStorage
메서드에 대한 개요이다.
Method | Description |
---|---|
setItem() |
로컬 스토리지에 키, 값을 추가한다. |
getItem() |
키에 맞는 값을 찾는다. |
removeItem() |
키에 맞는 값을 삭제한다. |
clear() |
로컬 스토리지에 저장된 모든 내용을 삭제한다. |
- JavaScript콘솔로 이동하여 입력하면 로컬 저장소에 무엇이 있는지 테스트할 수 있다..
- 눈으로 읽지만 말고 따라하세요.
localStorage
// Storage {length: 0}
setItem()
메서드를 사용하는 것처럼 일부 데이터를localStorage
에 추가하는 것이 쉽습니다.
일반 키와 값을 사용하여 이름을 지정할 수는 있지만 아무 문자열이나 될 수 있습니다.- 이제 콘솔에서 localStorage를 다시 테스트하면 새 키와 값을 찾을 수 있습니다.
localStorage.setItem('key', 'value');
localStorage
// Storage {key: "value", length: 1}
- 특정 키의 값을 가져오려면
getItem()
메서드를 사용한다.
localStorage.getItem('key');
// "value"
- 마지막으로 데이터를 삭제하려면
removeItem()
메서드를 사용한다.
localStorage.removeItem('key');
- localStorage에 모든 내용을 삭제하려면
clear()
메서드를 사용한다.
localStorage.clear();
- 이제 어플리케이션을 설정해보자.
프론트엔드(HTML 화면단) 작업
- 첫번째, 간단한 HTML(
index.html
)을 만든다. - 빠른 화면 작업이 필요할때 항상 사용하는
Primitive
(미니멀리스트 CSS 프레임워크)를 불러온다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Tab App</title>
<link rel="stylesheet" href="<https://taniarascia.github.io/primitive/css/main.min.css>">
</head>
<body>
<div class="small-container">
<h1>New Tab App</h1>
<form>
<input id="item" type="text" placeholder="New" required>
</form>
<h2>Items</h2>
<ul></ul>
<button>Clear All</button>
</div>
<script src="js/scripts.js"></script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Tab App</title>
<link rel="stylesheet" href="<https://taniarascia.github.io/primitive/css/main.min.css>">
</head>
<body>
<div class="small-container">
<h1>New Tab App</h1>
<<!-- more will go here -->
</div>
<script src="js/scripts.js"></script>
</body>
</html>
- 아래와 같이 3가지를 만들것이다.
- A text input - 새로운 아이템 추가하기.
- A list - 아이템들이 추가되어 보여질 곳
- A button - 모든 아이템 삭제하기
- 아래 코드를
"more will go here"
주석에 추가해라.
<form>
<input id="item" type="text" placeholder="New" required>
</form>
<h2>Items</h2>
<ul></ul>
<button>Clear All</button>
- 여기까지가 프론트엔드(화면 그리기)다. 이젠 자바스크립트를 이용해 기능 추가를 집중할 것이다.
" 여기 HTML은 설명을 목적으로 단순화되었으며 접근성 관련하여 설명하지 않습니다."
자바스크립트 기능 설정
localStorage
에 통합하기 전에,form
,list
를 가져오자(input
에서 입력하고 제출하면ul
에 표시되는 것)- 첫번째,
element
변수 선언하기(form, ul, button, text input
)
const form = document.querySelector('form');
const ul = document.querySelector('ul');
const button = document.querySelector('button');
const input = document.getElementById('item');
- 다음 할일은
li
엘리먼트를 만드는 함수를 생성한다, 함수 생성하는 이유는 1번 이상 사용하기 때문이다. 즉 재사용때문이다. liMaker()
함수를 호출할 것이다. 이 함수는li
엘리먼트를 만들고 매개변수로 받은 값을li
엘리먼트의 텍스트 값으로 넣을 것이다. 그리고 아이템 목록인ul
에 추가할것이다.
const liMaker = (text) => {
const li = document.createElement('li');
li.textContent = text;
ul.appendChild(li);
}
submit event
(form
에서 enter 누를때 실행)를 기다리는form
태그에event listener
를 추가할 것이다.e.preventDefault()
는 데이터를 서버로 보내는 form의 기본 submit action을 막는다. 여기선 필요 없으니 사용한다.- 대신에,
form
은input
의 값을 전달한다. 그리고liMaker(input.value)
함수를 호출해input.value
의 값이 들어간 아이템을 만들고 DOM에 추가한다. - 마지막으로,
input
입력창을 공백으로 처리한다.
form.addEventListener('submit', function (e) {
e.preventDefault();
liMaker(input.value);
input.value = "";
});
- 현재, 몇줄 안되는 코드로 리스트에 아이템을 추가하는 앱을 만들었다.
- 아이템 목록을 어디에서도 저장하지 않으므로, 새로고침하거나 닫으면 아이템 목록들이 사라진다.
- 마지막 단계는 데이터를 유지하기 위해 아이템 목록을
localStorage
에 저장해보자.
localStorage
사용하기
- 앱에 몇개의 기능을 추가할 것이다.
- 첫번째,
form
이 제출할때마다,input
값이 화면에 보이는것뿐 아니라localStorage
에 추가해야 한다. 또한localStorage
에 존재하고 있는 아이템들도 반복되어 아이템 리스트 첫번째에 표시되기를 원한다. - 마지막으로,
Clear All
버튼을 클릭하면 화면뿐만 아니라 localstorage의 모든 아이템들이 삭제되길 원한다.
- 첫번째,
- 시작할 빈 배열을 만들고
key
값이items
인localStorage
를 만든다. 지금localStorage
는 오직 문자열을 값으로만 지원하며, 배열에todos(할일,item)
을 저장한다.) JSON.stringify()
를 사용해 배열(데이터)를 문자열로 바꿔 이 문제(문자열을 값으로만 지원)를 해결 할 수 있다.JSON.parse()
는 localStorage의 내용을 데이터 변수로 작업할 수 있게 변경한다.(문자열->배열)
- 아래 코드를 우리가 앞에서 설정한 상수 선언 아래에 넣어라.
// other constant declarations here
...
let itemsArray = []; localStorage.setItem('items', JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem('items'));
form
이벤트 리스너에서 새로운input value
값을 배열에 넣자. 그리고localStorage
에도 새롭고, 업데이트된 새 값을 설정하자.
// form event listener here
...
e.preventDefault();
itemsArray.push(input.value);
localStorage.setItem('items', JSON.stringify(itemsArray));
- 자바스크립트가 이해할수 있고 작동할 수 있는 형태의 존재하는 모든 localStorage 데이터를 포함하는
data
변수에 있는 모든것들을 반복 할것이다. 그리고liMaker()
를 다시 실행된다.
앱을 열때마다 화면에 현재 저장되어있는 정보들이 표시된다.
data.forEach(item => {
liMaker(item);
});
- 마지막으로,
ul
에 있는 모든 자식들을 삭제할뿐만 아니라localStorage
에 있는 모든 데이터 삭제하는 클릭 이벤트를button
에 추가한다.
button.addEventListener('click', function () {
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild); }
});
- 잘 작성했으면, 모든것들이 화면에 나타날뿐 아니라
localStorage
에 저장 된다.console
에서localStorage
테스트를 살펴볼수 있다.
Storage {items:
"["Welcome","to","the","Thunderdome"]",
length: 1}
- 마지막 문제는, 브라우저를 닫거나, 새로고침 하면
localStorage
의 모든 기존 정보가 없어지고 화면에도 아무것도 남지 않는다. 왜일까? itemArray
는 스크립트가 실행될때마다 빈 배열로 리셋된다.- 아래 예제와 같이
localStorage
가 있는지 조건문을 사용해 고칠수 있다.
let items;
if (localStorage.getItem('items')) {
items = JSON.parse(localStorage.getItem('items'));
} else {
items = [];
}
- 위에 코드는 복잡하니 더 간결하려면 삼항 연산자를 이용하면 된다.
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
- 그러면, 우리의 앱이 완성되었다. 이제 할일을 입력하고 새로고침하거나 브라우저 창을 닫아도 개발자도구에서 수동으로 지우거나 또는
localStorage.clear()
명렁어를 실행시킬때까지 데이터가 지속된다. 아래는 자바스크립트 전체 코드이다.
const form = document.querySelector('form');
const ul = document.querySelector('ul');
const button = document.querySelector('button');
const input = document.getElementById('item');
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
localStorage.setItem('items', JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem('items'));
const liMaker = (text) => {
const li = document.createElement('li');
li.textContent = text;
ul.appendChild(li);
}
form.addEventListener('submit', function (e) {
e.preventDefault();
itemsArray.push(input.value);
localStorage.setItem('items', JSON.stringify(itemsArray));
liMaker(input.value);
input.value = "";
});
data.forEach(item => {
liMaker(item);
});
button.addEventListener('click', function () {
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild);
}
});
결론
- 이 튜토리얼에서 우리는 HTML5 web storage를 사용해 잠재적으빠르고 간단한 메모를 새 탭 페이지에 유지할 수 있는 to-do를 기반으로 만든 간단한 앱을 어떻게 만드는지 배웠다.
localStorage
에 더 많은 이해와 이것을 간단한 앱에 통합시키는 방법을 알기 바란다. - 이 글이 도움이 되었다면 다음 사람들도 도움을 될것이므로 이 글을 공유해주세요.
728x90
반응형
LIST
'개발일기 > Web' 카테고리의 다른 글
CDN(Contents Delivery Network) 개념 살펴보기(웹 최적화) (1) | 2020.10.21 |
---|---|
로컬에서 서브 도메인 활용하기(local sub domain) (3) | 2020.08.28 |