LocalStorage

LocalStorage는 브라우저에 데이터베이스처럼 자료를 저장할 수 있게 해주는 기능이다.

쓰는 방법은 여러가지가 있겠지만, 여기서는 간단하게 실습을 해 볼 것이다.

localStorage의 두 기능만 알고 넘어가보자.

---

localStorage.setItem

localStorage.setItem 기능은 2개의 문자열을 인수로 받는데

• 첫번째 인수는 Key 이름에 해당하는 문자열이 되고
• 두번째 인수는 그 Key값의 Value가 되는 값이 된다.

즉, localStorage.setItem은 키값쌍(배열)의 구조로 데이터를 처리하게 가공해준다.

 

---

localStorage.getItem

localStorage.getItem은 오로지 문자열 하나의 인수만 받는다.

인수로 받은 문자열과 동일한 localStorage의 Key와 일치하는 데이터값을 리턴하는 기능이다.

 

---

위 두 기능을 이용해 localStorage를 구현해보자.

<input type="text" class="textBox">
<button class="submit">Store it</button>

<script>
  const submitButton = document.querySelector('.submit')
  const textBox = document.querySelector('.textBox')

  const IsData = localStorage.getItem('mydata') || '[]' // 첫 입력이라면 배열 문자열을 할당.
  const dataArray = JSON.parse(IsData) // 위의 배열 상태를 parse함.

  submitButton.onclick = () => {
    dataArray.push(textBox.value) // parse된 값에 textBox에 입력된 값을 push함.
    localStorage.setItem('mydata', JSON.stringify(dataArray))
    // dataArray가 mydata에 덧씌워지며 값이 저장됨.
  }
</script>

localStorage에 자료를 저장할 경우 브라우저를 닫아도 계속 유지가 된다.

localStorage에 저장되는 값들은 개발도구의 Application에서 확인할 수 있다.

개발자 도구를 확인해보면 Key : Value 값 형태로 데이터가 브라우저 내에 저장되어 있는 것을 알 수 있다.