localStorage란 ?
위와 같은 특징이 있습니다 .
자바스크립트나 자바스크립트 기반의 프레임워크로 Web을 구현 하면서 화면 이동이 있거나 영구적으로 저장해야하는 경우 DB에 값을 저장하거나 임시적인 경우에는 쿠키를 사용하기도 합니다 .
이때 localStorage 라는 WebStorage API도 사용 할 수 있습니다 .
유효 기간이 없고 영구적으로 이용 가능
5MB까지 사용 가능 (쿠키는 4KB까지)
필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신)
자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생깁는데.
보통 이럴 때 데이터베이스(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
이상으로 포스팅 마치겠습니다 .