스토리지 | Notion

빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 변수에 저장하기

// 변수에 저장하기
let 사과바구니 = 0

// 사과 담기 기능
const JS_사과1개담기기능 = () => {
	사과바구니 = 1
}
const JS_사과2개담기기능 = () => {
	사과바구니 = 2
}
const JS_사과3개담기기능 = () => {
	사과바구니 = 3
}
// 사과 꺼내기 기능
const JS_사과꺼내기기능 = () => {
	alert(`사과바구니에 사과가 ${사과바구니}개 들어있어요.`)
}

변수에 저장하기

위 코드를 보면, 먼저 let 사과바구니 = 0 사과바구니라는 변수를 선언하고 0으로 초기화 하였습니다.
사과 담기 기능

세 개의 함수가 정의되어 있습니다. 각각의 함수는 사과바구니 변수에 1, 2, 3이라는 값을 할당합니다. 이 함수들을 호출하면 사과바구니 변수의 값이 변경됩니다.
사과 꺼내기 기능

이 함수는 alert를 사용하여 현재 사과바구니에 저장된 사과의 개수를 사용자에게 알려줍니다.

변수의 특성

새로고침: 웹 페이지를 새로고침하면 자바스크립트 변수는 초기화됩니다. 따라서 사과바구니의 값도 다시 0으로 초기화됩니다.
브라우저 종료 후 다시 열기: 브라우저를 닫았다가 다시 열면 역시 변수는 초기화되어 사과바구니의 값이 0이 됩니다.

🌿 로컬스토리지(localStorage) vs 세션스토리지(sessionStorage)

웹 브라우저에서 어떠한 로직에 활용되는 데이터를 유지시키고자 한다면, 해당 데이터를 저장할 공간이 필요합니다. 웹 브라우저는 Web Storage라고 하는 저장소를 제공 하는데, seesionStorage 와 localStorage 를 활용할 수 있습니다.

두개의 storage는 공통점을 가지게 됩니다. 먼저 두 storage 모두 local 환경에 데이터를 저장 한다는 특징을 공통점으로 가집니다. 또 다른 공통점으로는 데이터가 key-value 형태로 저장 이 됩니다. 마치 객체와 같죠. 이때, key와 value는 모두 문자열 형태로 변환되어 저장이 되어야 합니다. 공통점이 있다면 차이점도 존재를 하겠죠.

sessionStorage

먼저 seesionStorage부터 살펴볼까요? sesstionStorage는 데이터를 세션 단위로 저장합니다. 여기서 이야기하는 세션은 사용자가 페이지에 접속하는 순간부터 접속이 끊어지는 순간까지 를 이야기합니다. 즉, sessionStorage는 해당 페이지와 접속이 끊어지거나 브라우저를 종료하게 되면 해당하는 세션 저장소의 데이터를 영구히 삭제 해 버립니다. 휘발성 메모리인 것이죠.

localStorage

이번에는 localStorage를 알아보죠. localStorage는 데이터를 도메인 단위로 저장이 되며, localStorage에 저장된 데이터는 도메인이 같다면 path가 다르더라도 서로 데이터를 공유 하게 됩니다. 또한, locaStorage는 비휘발성 메모리이기 때문에 저장된 데이터가 브라우저, pc를 종료하더라도 그대로 남아있게 되죠. 반영구적인 데이터여서 직접 Storage 데이터를 삭제할 때까지 존재합니다. 이러한 특징 때문에 페이지를 재방문 했을 때도 남아있어야 하는 사용자 개별 설정 등의 데이터를 저장하게 됩니다.

localStorage.setItem()

localStorage는 window.localStorage로 접근할 수 있습니다. 그리고 localStorage의 앞에 적혀지는 window는 생략이 가능합니다. localStorage에 접근했다면, 이제 데이터를 저장해야겠죠. 데이터를 저장할 때는 localStorage에 내장되어 있는 setItem이라는 메서드 를 사용하면 됩니다.
```
localStorage.setItem();
```
setItem 뒤에 있는 소괄호 안에 저장할 데이터를 넣어주면 됩니다. Web Storage의 데이터는 key-value 형태 로 저장이 된다고 했었죠? 소괄호 안에 두개의 인자를 넣어주면 되는데, 첫번째 인자로 key 를, 두번째 인자로 value, 저장할 데이터를 담아주면 됩니다.
```
localStorage.setItem('data-key', 'data-value');
```
그렇게 하면 형식에 맞춰 key-value 형태로 데이터가 저장되죠.

데이터를 저장했다면, 그 데이터를 활용하기 위해 저장된 데이터를 확인하고 참조해올 수 있어야 겠죠. 먼저 저장된 localStorage 데이터는 개발자 도구 내에서 직접 확인할 수 있습니다.
❗️ localStorage 확인 경로
```
개발자 도구 ⇒ Application 탭 ⇒ >Local Storage 토글
```
해당 위치로 이동해, 토글을 열어 보면 우리가 저장한 데이터를 확인할 수 있는데요. localStorage는 도메인 단위로 데이터가 저장되고 관리되기 때문에 현재 접속해 있는 도메인의 url을 클릭 해서 우리가 저장한 데이터를 확인할 수 있습니다.