로컬스토리지 (localStorage)

developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

javascript의 localStorage기능을 사용하면 브라우저간 데이터를 저장하거나 가져올수있다.

 

localStorage.setItem

// localStorage에 name이라는 key값으로 Sample이라는 value를 저장한다.

localStorage.setItem("name", "Sample");

 

localStorage.getItem

// localStorage에 name이라는 key값으로 된 값을 가져온다. 이 경우는 위에 저장해둔 "Sample"을 가져온다.

localStorage.getItem("name");

 

localStorage.clear();

// localStorage 초기화

localStorage.clear();

 

localStorage는 대부분의 경우 json형태로 저장하는 경우가 많다. (객체) 아래는 예제

 

HTML

// Bootstrap

<div class="container mt-4">
   <h1 class="text-center text-primary">JS Local Storage</h1>
   <form>
      <div class="form-group">
         <label for="#name">Name</label>
         <input type="text" id="name" class="form-control" />
      </div>  
      <div class="form-group">
         <label for="#age">Age</label>
         <input type="text" id="age" class="form-control" />
      </div>
      <div class="form-group">
         <label for="#addr">Addr</label>
         <input type="text" id="addr" class="form-control" />         
      </div>
      <button class="btn btn-primary btn-block" id="addBtn" >Add</button>
      <button class="btn btn-danger btn-block" id="resetBtn">Reset</button>
   </form>
   <ul class="list-group mt-4">
      
   </ul>       
</div> 

 

JS

const nameInput = document.querySelector('#name');
const ageInput = document.querySelector('#age');
const addrInput = document.querySelector('#addr');
const addButton = document.querySelector('#addBtn');
const resetButton = document.querySelector('#resetBtn');
const personList = document.querySelector('.list-group');
let persons = [];

addButton.addEventListener('click', addPerson);
resetButton.addEventListener('click', clearLocal);

window.onload = getStorage();

function getStorage() {
   let localPerson = JSON.parse(localStorage.getItem("person"));
   if (localPerson) {
      for (p in localPerson) {
         const newList = document.createElement('li');
         newList.innerHTML = `${localPerson[p]}`;
         newList.classList.add('list-group-item');
         personList.appendChild(newList);         
      }
   } else {
      console.log('no local storage items');
   }
}

function addPerson(e) {
   e.preventDefault();
   const nameValue = nameInput.value;
   const ageValue = ageInput.value;
   const addrValue = addrInput.value;   
   if (nameValue == "" || ageValue == "" || addrValue == "") {
      alert('insert data');
   } else {
      const newList = document.createElement('li');
      newList.innerHTML = `name : ${nameValue}, age : ${ageValue}, addr : ${addrValue}`;
      newList.classList.add('list-group-item');
      personList.appendChild(newList);
      saveStorage();
   }
   
   function saveStorage() {
      let personData = `name : ${nameValue}, age : ${ageValue}, addr : ${addrValue}`;
      persons.push(personData);
      localStorage.setItem("person", JSON.stringify(persons));
   }
}

function clearLocal() {
   localStorage.clear();
   alert('clear local storage !');
}

 

button을 누르면 input에서 입력했던 값들을 ul에 출력해주고 localStorage에 저장한다.

localStorage에 저장하는 부분을 보면 위에서 배열을 만들어주고 그 배열에 값을을 push 시켜주고

마지막에 저장할때는 JSON.stringiry를 통해서 string형태로 저장해준다.

let persons = [];

function saveStorage() {
  let personData = `name : ${nameValue}, age : ${ageValue}, addr : ${addrValue}`;
  persons.push(personData);
  localStorage.setItem("person", JSON.stringify(persons));
}

 

반대로 가져올때는 string화 되어있는 localStorage값을 JSON.parse로 객체형태로 변경해준다.

그다음에 다시 ul태그에 출력해주는 형태 이다.

let localPerson = JSON.parse(localStorage.getItem("person"));

if (localPerson) {
   for (p in localPerson) {
      const newList = document.createElement('li');
      newList.innerHTML = `${localPerson[p]}`;
      newList.classList.add('list-group-item');
      personList.appendChild(newList);         
   }
} else {
   console.log('no local storage items');
}