Local Storage (로컬 스토리지) 를 이용한 데이터 저장

Local Storage 로컬스토리지를 이용한 간단한 데이터 저장 실습. 참고한 블로그에서는 DB없이 간단한 게시판 만들기 테스트를 해본 좋은 예제를 소개한다.

 

---

 

HTML5부터 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조 Web Storage가 추가되었다. Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로, 영구저장소 LocalStorage와 임시저장소 SessionStorage를 가지고 있다. 쿠키와 비슷하지만 개수와 용량의 제한이 없고,쿠키처럼 매번 서버로 전송하지 않아 네트워크 트래픽 비용을 줄여준다. 

 

로컬스토리지 : 사용자(로컬)에 저장하는 임시저장소. 영구적. windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장, 조회가 이루어진다.

세션스토리지 : 임시적. windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장, 조회가 이루어진다.

 

// 데이터 저장하기
localStorage.setItem(key, value);

// 데이터 불러오기
localStorage.getItem(key);

// 데이터 삭제
localStorage.removeItem(key)

// 모든 것 삭제
localStorage.clear()

// index에 해당하는 키 소환
localStorage.key(index)

// 저장된 항목의 수
localStorage.length

 

 

 

 

Local Storage를 이용한 데이터 저장

---

localStorage의 데이터 저장, 소환 문법은 쿠키의 그것과 비슷하다.

// 데이터 저장하기
localStorage.setItem(이름, 저장할 내용);

// 데이터 불러오기
localStorage.getItem(이름);

 

로컬스토리지의 사용방법은 데이터를 저장할 땐 배열을 선언하여 각각의 정보들을 배열의 요소로 추가하고, 한 이름에 대한 정보들은 여러 항목이 있기에 객체로 저장한다.

objArr = [{num:1, title:'test', contents:'blahblah'}, ...]

 

localStorage는 iterable (반복가능한) 객체가 아니어서 키와 값 전체를 얻으려면 배열처럼 다루면 된다.

 

for(let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  alert(`${key}: ${localStorage.getItem(key)}`);
}

 

 

 

 

참고

 

• https://dpsc615.tistory.com/113
• https://ko.javascript.info/localstorage