이 글에서는 Javascript30 Day 15를 진행하며 localStorage에 대해 공부한 내용을 정리해봅니다.
참고자료 MDN
참고자료 모던자바스크립트
참고자료 jess2
참고자료 daleseo
참고자료 포뇨아빠
로컬 스토리지 개념
- Web Storage에는
localStorage와sessionStorage라는 두 가지 저장 방식이 있음 - Window 객체의 하위 객체(
Window.localStorage)이지만 줄여서localStorage라고만 쓸 수도 있다. - 데이터를 사용자 로컬에 보존하는 방식
- 자바스크립트로 저장, 덮어쓰기, 삭제 등의 데이터 조작이 가능
- 모바일에서도 사용이 가능
- 크롬 시크릿모드와 같은 private browsing에서는 호환되지 않음
자세한 내용
유사 개념과의 비교
localStorage VS sessionStroage
| 구분 | 유효기간 | 사용처 |
|---|---|---|
| localStorage | 영구 저장. 브라우저가 닫히거나 다시 열려도 유지 | 세션이 끊기거나 동일한 세션이 아니라도 사용 가능 |
| sessionStorage | 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 삭제 | 동일한 세션에서만 사용 가능 |
- 세션 : 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다. 그러나 페이지를 새로운 탭이나 창에서 열면, 새로운 세션을 생성한다. 같은 URL이라고 하더라도 다수의 탭/창을 열면 각각의 탭/창에 대해 새로운 세션 스토리지를 생성한다.
localStorage VS cookie
브라우저에 데이터를 저장한다는 점에서 쿠키를 떠올릴 수 있는데 쿠키와는 다음과 같은 차이점이 존재한다.
| 구분 | 유효기간 | 최대 용량 | 전송 | 객체 조작 |
|---|---|---|---|---|
| localStorage | 없음(영구 저장) | 5MB | 필요할 때 언제든 | 자바스크립트 내에서 |
| cookie | 있음 | 4MB | 서버 접속시 자동 | HTTP 헤더를 통해 |
쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다.
웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있습니다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다.
-모던 자바스크립트
로컬 스토리지 구성
Key와 Value로 구성되어 있다.
- Value : 저장하고자 하는 것을 저장
- Key : 저장한 것을 식별
투두리스트를 예로 들었을 때 일반적으로 value에 text, id를 저장한다. id값이 필요한 이유는 투두리스트 아이템 하나하나를 식별하기 위함이다. id값은 객체의 length를 이용해서 할당할 수도 있으나 unique하지는 않다. unique하게 하고자하면
date.now()를 통해 현재 시간을 id로 활용할 수 있다.
주의할 점
로컬 스토리지에는 오직 string 값만 저장할 수 있다. 특히 숫자를 사용할 때 주의하자!
-
입력
만일 배열을 저장하고자 한다면 먼저 배열 안의 값들을 모두 string으로 변환해야 한다. 이를 위해 자바스크립트의 객체를 string 값으로 바꿔주는JSON.stringify();를 활용한다. -
출력
로컬 스토리지에 저장된 값을 자바스크립트로 다루기 위해서는 먼저 string을 객체로 변환해야 한다. 이를 위해 string값을 객체로 바꿔주는JSON.parse();를 활용한다.
로컬 스토리지 메소드
localStorage.setItem(key, value)
로컬 스토리지에 key, value로 아이템을 저장한다.
localStorage.getItem(key)
로컬 스토리지 안의 아이템들 중 특정 key값을 가진 value를 나타낸다.
localStorage.removeItem(key)
로컬 스토리지의 아이템을 제거한다.
localStorage.clear()
로컬 스토리지 항목 전체를 제거한다.
localStorage.key(index)
해당 인덱스 값을 가진 key를 구한다.
localStorage.length
로컬 스토리지에 저장된 데이터의 수
실습 - To Do List 만들기
로컬 스토리지를 공부하는 방법으로 To Do List만들기가 있다.
https://emewjin.github.io/momentum-clone-2021/
로컬 스토리지에 저장하기
input을 통해 입력된 값은 다음과 같이 저장되어 있으며
const items = [];
const newId = items.length+1;
const item ={
text: text,
id: newId
};
items.push(item); 이를 로컬 스토리지에 저장하기 위해 string값으로 바꿔준다.
function saveToLS(){
localStorage.setItem(ITEM_LS, JSON.stringify(items))
}새로고침시 로컬 스토리지에 저장된 값 출력하기
function loadFromLS(){
const loadedItem = localStorage.getItem(ITEM_LS);
//새고를 했는데 로컬 스토리지에 데이터가 있다면
if(loadedItem !== null){
//자바스크립트에서 다룰 수 있도록 객체로 데이터를 바꾸고
const parsedItem = JSON.parse(loadedItem);
//그것을 화면에 출력해준다.
parsedItem.forEach(function(item) {
paintItem(item.text);
});
}
}출력을 담당하는 paintItem은 이 방법을 응용했다.
투두리스트 리셋하기
새로고침 시에도 리셋된게 유지되어야 하므로, 리셋 버튼을 클릭하면 아래 함수를 수행하게 한다.
function deleteAllToDos(){
localStorage.removeItem(ITEM_LS);
window.location.reload();
}