블로그

웹 스토리지는 클라이언트에서 서버로 데이터를 전송하여 실제 데이터베이스에 저장하는 것이 아닌 웹 브라우저의 저장공간에 데이터를 저장하게 됩니다.

(저장 공간 : 5mb)

 

웹 스토리지는 보안상 중요한 정보인 로그인 비밀번호 등엔 사용되지 않으며 비교적 덜 중요한 정보인 장바구니 목록이나 테마 정보 등에 사용됩니다.

 

웹 스토리지엔 localStorage와 sessionStorage가 있습니다.

각 스토리지는 키와 값으로 저장되며 사용법은 동일하지만 삭제 시점의 차이가 존재합니다.

 

웹 브라우저 저장소인 localStorage와 sessionStorage에 대해 알아보고자 합니다.

 

---

 

- 목차 - 

가. localStorage & sessionStorage

  1. localStorage

  2. sessionStorage

나. 사용법

  1. 기본 사용법

  2. 배열 저장법

다. 참고자료

 

---

 

가. localStorage & sessionStorage

1. localStorage

- 브라우저를 닫거나 종료하여도 별도로 삭제하기 전까지는 데이터가 남아있습니다.

- 로컬스토리지는 현재 사용하는 기기(PC, 스마트폰)에 저장하며 도메인별로 따로 저장됩니다.

(pc에서 로컬스토리지를 저장했다면 스마트폰에서는 해당 데이터를 확인할 수 없습니다)

(www.naver.com에 저장한 데이터는 www.daum.net에서 확인할 수 없습니다. 하지만 도메인이 같을 경우 새 창을 띄워도 동일한 데이터를 확인할 수 있습니다)

 

 

2. sessionStorage

- 브라우저를 닫거나 종료하면 데이터가 삭제됩니다.

- 세션스토리지는 탭별로 별도의 데이터를 저장하게 됩니다.

(같은 브라우저 탭 안에서만 데이터가 유지됩니다)

 

 

 

* localStorage & sessionStorage 차이점

- 아래 코드를 실행하여 로컬스토리지와 세션스토리지에 데이터를 각 하나씩 저장합니다.

// storage.html 파일
localStorage.setItem("local", "local_value")
sessionStorage.setItem("session", "session_value")

- 다른 html 파일을 생성하여 위의 데이터를 console에 출력합니다.

// storage02.html 파일
console.log(localStorage.getItem("local")) // local_value 출력
console.log(sessionStorage.getItem("session")) // session_value 출력

위 이미지처럼 실제로 콘솔창에는 2개의 값이 출력됩니다.

 

- 새 탭을 열어 위와 동일한 주소로 접속합니다.

- 그 결과 다른 탭에서 sessionStorage 값은 null(값 없음)이 출력되고 localStorage 값만 출력되고 있습니다.

- 브라우저를 완전히 종료하고 다시 실행해도 위와 같은 결과가 도출됩니다.

 

 

---

 

나. 사용법

1. 기본사용법

1. 먼저 localStorage와 sessionStorage는 html5부터 지원하기 때문에 아래 코드를 통해 지원여부를 확인할 수 있습니다.

if (typeof (Storage) !== "undefined") { // 스토리지 지원 여부 확인
      // typeof(Storage)가 undefined가 아니면 웹 스토리지를 지원합니다.
    } else {
      // 웹 스토리지를 지원하지 않습니다.
    }

 

 

 

2. localStorage(sessionStorage)에 데이터 추가하기

* localStorage와 sessionStorage는 사용법이 동일하기 때문에 코드 예제엔 localStorage가 사용되지만 sessionStorage를 사용시 이름만 바꿔서 사용하시면 됩니다.

// 첫 번째 파라미터 사용할 키 명, 두 번째 파라미터 값
localStorage.setItem("key", "value");

localStorage객체의 내장함수인 setItem()을 사용하여

첫 번째 파라미터로 키 명을 작성하고

두 번째 파라미터로 값을 작성합니다.

 

 

 

3. localStorage(sessionStorage)에 데이터 가져오기

console.log(localStorage.getItem("key")) // value가 콘솔에 출력됩니다.

localStorage객체의 내장함수인 getItem("키 명")을 사용합니다.

파라미터로 setItem()으로 추가한 데이터의 키 명을 입력합니다.

 

 

* setItem()으로 추가한 데이터를 console.log()로 확인하지 않아도 브라우저에서 확인이 가능한 방법

- 로컬스토리지를 저장한 브라우저를 실행합니다. (vscode의 라이브서버 확장기능에서도 확인할 수 있습니다)

- 키보드 상단에 F12키를 누르시거나 마우스 오른쪽 클릭 후 검사 항목을 클릭합니다.

 

 

- 검사를 클릭하면 개발자도구창이 실행됩니다.

개발자 도구창을 가로로 늘리시고 상단에 응용 프로그램을 클릭합니다.

그리고 좌측에 로컬 저장소와 세션저장소를 확인할 수 있습니다.

 

 

- 로컬 저장소 좌측에 ▶ 을 클릭하면 아래 저장된 주소가 나오고 주소를 클릭하면

아래 이미지와 같이 setItem("key, "value")으로 저장한 데이터를 확인할 수 있습니다.

 

 

 

 

 

 

4. localStorage(sessionStorage)에 데이터 삭제하기

// 키가 key인 데이터를 삭제합니다.
localStorage.removeItem("key");

localStorage객체의 내장함수인 removeItem("키 명")을 사용합니다.

파라미터로 setItem()으로 추가한 데이터의 키 명을 입력합니다.

실제로 실행한 결과 아래 이미지와 같이 추가한 key 데이터가 삭제된 모습을 볼 수 있습니다.

 

 

 

 

5. localStorage(sessionStorage)에 모든 데이터 삭제하기

// 로컬 스토리지 내의 모든 데이터를 삭제합니다.
localStorage.clear()

localStorage객체의 내장함수인 clear()를 사용합니다.

실제로 삭제되는지 확인하기 위해 아래 별도의 데이터를 추가하였습니다.

 

 

그리고 clear() 실행 시 아래와 같이 모든 데이터가 한 번에 삭제되었습니다.

 

 

 

 

 

2. 배열 저장법

로컬스토리지와 세션스토리지는 키 값으로 문자열만 저장되기 때문에 바로 배열을 넣게되면 배열이 아닌 문자열로 저장됩니다.

// 두 번째 파리미터로 배열을 추가했으나 문자열로만 추가됩니다.
localStorage.setItem('key', ["apple", "banana", "pear"])

두 번째 파라미터를 배열로 지정했으나 값에는 위 이미지와 같이 배열이 아닌 문자열로 추가됩니다.

 

 

 

* JSON.stringify() & JSON.parse() 이용하기

let arr = ["apple", "banana", "pear"]
localStorage.setItem('key', JSON.stringify(arr)) // ["apple", "banana", "pear"]로 추가

setItem() 내장함수의 두 번째 파라미터로 JSON.stringify()를 이용해 문자열로 변환 후 전달 시 배열 형태로 저장됩니다.

 

하지만 getItem()으로 가져올 때 그냥 가져오게 되면 배열이 아닌 문자열 형태로 출력됩니다.

따라서 가져올 때 JSON.parse()를 이용해 가져오게 되면 배열로 사용할 수 있게 됩니다.

console.log(JSON.parse(localStorage.getItem("key"))) // 배열 형태로 출력

위 코드를 실행 시 콘솔 창에 배열로 출력된 모습을 확인할 수 있습니다.

 

---

웹 브라우저 저장소인 localStorage와 sessionStorage를 알아보았습니다.

둘의 가장 큰 차이점은 삭제 시점에 있었는데요,

localStorage는 삭제하기 전까지 웹 브라우저를 종료하여도 데이터가 남아있으며 동일한 도메인 내에서는 데이터를 공유할 수 있음을 알 수 있었습니다.

하지만 sessionStorage는 동일한 도메인에서도 새 탭에선 데이터를 공유할 수 없으며 브라우저를 종료하면 데이터가 삭제됨을 알 수 있었습니다.

 

둘의 차이점을 확인하여 적절한 상황에 웹 브라우저 저장소를 사용하는 것이 중요하다고 생각되어 집니다.

여기까지 저의 글을 읽어주셔서 감사합니다.

---

 

3. 참고자료

1. https://www.youtube.com/watch?v=nmLwQyWzkXU - 개발자의 품격, 자바스크립트 기초-localStorage와 sessionStorage 이해하기

2. http://www.tcpschool.com/html/html5_api_webStorage - Web Storage