localStorage 로컬스토리지

✔️ 로컬스토리지란?

- web storage 객체 중 하나 (나머지하나는 sessionStorage)
- 브라우저에 key-value를 저장
- 탭, 창 전체에서 공유됨
- 브라우저를 껐다 켜도 남아있음
- key, vlaue는 반드시 문자열!!

 

 

1. sessionStorage와의 비교

로컬스토리지는 web Storage의 일종이다. 

브라우저에 저장하는 기능을 한다는 공통점이 있지만 차이점도 존재한다.

webStorage에는 sessionStorage도 있는데, 둘의 가장 큰 차이점은 1️⃣저장범위와 2️⃣저장기간이다.

 

 

2. 사용이유

1️⃣ 서버로 전송되는 쿠키보다 더 많은 양의 자료 보관

(web Storage 객체는 네트워크 요청시 서버로 전송되지 않는다.)

 

2️⃣ 페이지 새로고침, 브라우저 다시 실행해도 데이터가 남아있음

(서버까지 전송되지 않아도 브라우저에 데이터를 남겨두고 싶을때 사용)

 

 

 

 

3. 사용법

 

 

 

4. 주의사항: 문자열 데이터 타입만 받음

웹스토리지는 문자열 데이터만 저장하기 때문에, 다른타입의 데이터를 저장시 문자형으로 변환된다.

 

따라서 JSON형태로 데이터를 읽고 써야한다.

문자열이 아닌 타입의 데이터를 JSON으로 쓰고 읽을때는 아래의 두단계를 거친다.

1️⃣ JSON.stringify( 쓰고 싶은 value ) 

localStorage.setItem('nums', JSON.stringify([1, 2, 3]))

2️⃣ JSON.parse(localStorage.getItem('쓰고싶은 key'))

JSON.parse(localStorage.getItem('nums'))
[1, 2, 3]

 

 

 

5. 확인하기

저장된 값은 개발자도구의 Application-Storage-LocalStorage탭에서 확인 가능하다.

 

 

 

 

 

 

 

참고자료

모던 JavaScript 튜토리얼

<DaleSeo/> 

입문자를 위한 자바스크립트 기초 #로컬스토리지(localStorage)

 

 

 

📚  직접 공부하고 일일이 정리한 내용입니다.  ✍️