Localstorage에 대해 알아보자

localStorage란 ?

• 데이터를 사용자 로컬에 보존 하는 방식.
• 데이터를 저장, 덮어쓰기, 삭제등 CRUD가 가능
• 자바스크립트(Javascript)로 조작.
• 모바일에서 사용 가능

위와 같은 특징이 있습니다 .

자바스크립트나 자바스크립트 기반의 프레임워크로 Web을 구현 하면서 화면 이동이 있거나 영구적으로 저장해야하는 경우 DB에 값을 저장하거나 임시적인 경우에는 쿠키를 사용하기도 합니다 .
이때 localStorage 라는 WebStorage API도 사용 할 수 있습니다 .

localStorage와 쿠키와의 차이점 ?

• 유효 기간이 없고 영구적으로 이용 가능

• 5MB까지 사용 가능 (쿠키는 4KB까지)

• 필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신)

어떤 데이터들을 localStorage에 저장하면 좋을까 ?

자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생깁는데.
보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하게 됩니다 .

하지만 저장해야할 데이터가 별로 중요하지 않거나,
유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다 .

로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않습니다.
즉 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다.
따라서 저장 해야 할 데이터가 별로 중요하지 않거나 ,
유실되도 무방한 데이터라면 로컬 스토리지에 저장 해도 무방합니다 .
localStorage의 위치는 개발자 도구를 열고 Application 탭을 누르면 Storage에 Local Storage에서 확인이 가능합니다

localStorage 는 어떻게 사용 할까 ?

• localStorage의 기본 구성

  • 키(key)와 값(value)을 하나의 세트로 저장.

  • 도메인과 브라우저별로 저장.

  • 값은 반드시 문자열로 저장.

    • 주의 할 점 ❗
      데이터 저장 형식이 오직 문자형(string) 데이터 타입만 지원 하기때문에 다른 타입의 데이터를 저장 하려 할 경우 문자형으로 변환을 하기 때문에 객체형 데이터나 숫자형 데이터를 저장 할 때에 주의 해야 합니다

      ✔ 해결 방법 ?
      JSON 형태로 데이터를 읽고 쓰기 !

          > localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
            undefined
             > JSON.parse(localStorage.getItem('json'))
        {a: 1, b: 2}

      위와같은 방법으로 배열 , 숫자, 객체형 타입의 데이터를 저장할 때에 사용 할 수 있습니다 .

• 기본 문법

// 키에 데이터 쓰기
localStorage.setItem("key", value)

// 키로 부터 데이터 읽기
localStorage.getItem("key")

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

// 모든 키의 데이터 삭제
localStorage.clear()

// 저장된 키/값 쌍의 개수
localStorage.length

이상으로 포스팅 마치겠습니다 .