localstorage 사용하기

Do it 자바스크립트 입문 책의 실습 과제 일부를 정리한 내용입니다.

HTM5 웹 스토리지

HTML5 표준이 나오면서 클라이언트 쪽에 자료를 저장하는 방법으로 웹 스토리지가 등장했다. 웹 스토리지의 자료들은 쿠키처럼 사이트 관련 자료들을 저장하는데 쿠기와 다르게 서버에서 접근해서 읽어가지 못하며 도메인당 5mb 정도로 쿠키보다 용량이 크다. 웹 스토리지는 스토리지 객체를 제공하며 키와 값, 하나의 쌍으로 자료를 저장하는데 형태에 따라 세션 스토리지, 로컬 스토리지로 나뉜다.

세션 스토리지 - 브라우저 창이나 탭을 닫을 때까지를 하나의 세션이라고 한다. 세션동안 자료를 기억했다가 세션이 끝나면 (창을 닫으면) 자료를 모두 지운다.
로컬 스토리지 - 세션이 끝나도 자료를 저장한다. 객체이므로 메서드를 사용해 입력한 내용을 저장하거나 가져와 사용할 수 있다.

로컬스토리지와 세션스토리지에서 사용할 수 있는 프로터치와 메서드를 살펴보면

length - 객체에 저장된 프로퍼티 개수
key(n) - n 번째 키의 이름 반환
getItem(key) - 키에 해당하는 값 반환
setItem(key, value) - 해당 키에 값을 저장
removeItem(key) - 해당 키의 값을 삭제
clear() - 모든 키/값 프로퍼티를 삭제

배열을 로컬스토리지에 저장하고 가져오기

배열을 로컬스토리에 저장할 때는 JSON.stringfy() 메서드를 사용해 배열의 여러 값을 하나의 문자열처럼 변환해서 저장하고, 이렇게 저장한 값을 로컬스토리지에서 가져와 배열 형태로 변환할 때는 JSON.parse() 메서드를 사용합니다.

// 배열 선언, 할당하고
let Arr = ['a', 'b', 'c'];

// 로컬스토리지에 저장하고
localStorage.setIten('set', JSON.stringify(Arr));

// 로컬스토리지에서 불러오기
JSON.parse(localStorage.getItem("set"));

해당 메서드를 사용하지 않고 저장하면 아래 get 처럼 배열이 아닌 문자열 형태로만 저장되고,

데이터를 그냥 불러오면 아래처럼 배열 자체를 문자열로 묶어서 가져온다.

특정 요소를 배열에 담고 이벤트 리스너 연결하기

특정 클래스를 지정한 요소를 배열에 담고 for 반복문으로 배열의 요소들을 순회하며 이벤트 리스너를 연결할 수 있습니다.

// 클래스가 close 인 요소들을 모두 모아서 배열에 담고
let remove = document.querySelectorAll(".close");  

// 배열을 돌면서 이벤트리스터를 연결
for (let i = 0; i < remove.length; i++) { 
  remove[i].addEventListener("click", removeList); // removeList 함수는 아래 정의

}

function removeList() {
  let id = this.getAttribute("id"); // this(클릭한 삭제 버튼)의 id 값 가져와 id 변수에 저장 

  itemList.splice(id, 1); // itemList 배열에서 인덱스 값이 id인 요소 1개 삭제
  showList(); // 변경된 itemList 배열을 다시 화면에 표시
}

입력한 값 베열에 담아 로컬스토리지에 저장하고 불러오기

빈배열을 만들어서 입력하는 값들을 배열에 담아주고, 해당 배열을 로컬스토리지에 전달해서 저장합니다. 이후 화면에 보여주는 itemList 배열을 로컬스토리지 값으로 가져와 넣어주면, 새로고침해도 해당 값을 그대로 유지합니다.

// 빈배열 선언
let itemList = [];

// 추가 버튼에 이벤트 연결
let addBtn = document.querySelector("#add"); 
addBtn.addEventListener("click", addList); // addBtn.onclick = addList; 라고 해도 됨

// 이벤트 발생시 실행하는 함수
function addList() {
  let item = document.querySelector("#item").value; // 텍스트 필드 내용 가져옴 
  if (item != null) {
    itemList.push(item); // itemList 배열의 끝에 item 변수 값 추가
    document.querySelector("#item").value = ""; // 해당 입력창 리셋 
    document.querySelector("#item").focus(); // 입력창에 다시 포커스 
  }
  localStorage.setItem("storageList", JSON.stringify(itemList)); // 로컬스토리지에 배열 저장 
  showList(); // 해당 목록 화면에 보여주는 함수 
}

// 로컬스토리지에 저장한 값 불러오기

function getItems() {
  let storedData = localStorage.getItem("storageList"); // 데이터 불러와서 

  if (storedData !== null) {
    itemList = JSON.parse(storedData); // 배열 형태로 변환
  }

  showList();
}