LocalStorage vs SessionStorage ์ดํด๋ณด๊ธฐ
Sep 01, 2023
์น ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฐ๋ฐํ ๋ ๋ฐ์ดํฐ๋ฅผ ํด๋ผ์ด์ธํธ ์ธก์ ์ ์ฅํด์ผ ํ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. ์ฃผ๋ก ์ฟ ํค๋ ์น ์คํ ๋ฆฌ์ง๋ฅผ ์ฌ์ฉํ๋๋ฐ, ๊ทธ ์ค ์น ์คํ ๋ฆฌ์ง์ ๋ ์ข
๋ฅ์ธ โLocalStorageโ์ โSessionStorageโ๋ฅผ ์ ๋ฆฌํด ๋ณด๋ ค ํฉ๋๋ค.
์น ์คํ ๋ฆฌ์ง(Web Storage)๋?
์ฐ์ ์น ์คํ ๋ฆฌ์ง์ ๋ํด ์์๋ณด๋ฉด, ์น ์คํ ๋ฆฌ์ง๋ ๋ธ๋ผ์ฐ์ ์์ ํค์ ๊ฐ์ ํํ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์๋ ํด๋ผ์ด์ธํธ ์ธก ์ ์ฅ์์
๋๋ค. ์ด๋ ์ฟ ํค(Cookie)์๋ ๋ฌ๋ฆฌ, ๋ฐ์ดํฐ์ ํฌ๊ธฐ ์ ํ์ด ํฌ๊ณ , ์๋ฒ์ ์๋์ผ๋ก ๋ฐ์ดํฐ๊ฐ ์ ์ก๋์ง ์์ ์ฑ๋ฅ์ ๋ ์ ๋ฆฌํ ํน์ง์ ๊ฐ์ง๋๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ ์ ์ฅ์์ ์ ์ฅ๋ ๊ฐ์ ํ์ธํ ์ ์์ต๋๋ค.
๋ธ๋ผ์ฐ์ ๋ณ ์ ์ฅ์
- Microsoft Edge: ๊ฐ๋ฐ์๋๊ตฌ โ ์์ฉํ๋ก๊ทธ๋จ โ ์ ์ฅ์
- Firefox: ๊ฐ๋ฐ์๋๊ตฌ โ ์ ์ฅ์
- Chrome: ๊ฐ๋ฐ์๋๊ตฌ โ ์ ํ๋ฆฌ์ผ์ด์
์ฟ ํค(Cookie) vs ์น ์คํ ๋ฆฌ์ง(Web Storage)
ใ
ค | Cookie | Web Storage |
๊ตฌ์กฐ | โCookie-name : Cookie-valueโ | โKey : Valueโ |
์ ์ฅ ๋ฐ์ดํฐ | ๋ฌธ์์ด | ๋ฌธ์์ด ๊ฐ์ฒด |
์ฉ๋ | ์ฝ 4KB | ์ฝ 10MB |
๊ฐฏ์ | ์ฝ 150๊ฐ | ์ ํ ์์ |
์๋ฉธ ์๊ฐ ์ค์ | ๊ฐ๋ฅ | ๋ถ๊ฐ๋ฅ |
์์ ์๋ชจ | ๋ง์
(๋งค๋ฒ ์๋ฒ๋ก ์ ์ก) | ์ ์
(ํ์ํ ๊ฒฝ์ฐ์๋ง ์ ์ก) |
[์ถ์ฒ]
- ์น ์คํ ๋ฆฌ์ง - https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#web_storage
LocalStorage vs SessionStorage
์ด์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์น ์คํ ๋ฆฌ์ง์ ๋ ์ข
๋ฅ์ธ LocalStorage์ SessionStorage์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค.
๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ ์๋ฉธ ์์ ๊ณผ ์ ๊ทผ๋ฒ์์
๋๋ค.
- LocalStorage: ์๋ฉธ ์์ ์ ์ง์ ์ค์ ํด์ผ ํ๊ณ , ๊ฐ์ ๋ธ๋ผ์ฐ์ ์์ ์๋ฉธ ์ด์ ๊น์ง ์ ์ฅ์๋ฅผ ๊ณต์ ํฉ๋๋ค.
- SessionStorage: ์ธ์ ์ ์ข ๋ฃํ๋ฉด ๋ฐ์ดํฐ๊ฐ ์๋ฉธ๋๊ณ , ํด๋น ์ธ์ ์ ๋ํ ์ ์ฅ์๋ง ์ ๊ทผ์ด ๊ฐ๋ฅํฉ๋๋ค.
์ด์ ๋ฐ๋ผ ํ์ฉ ์ฉ๋์ ๋ฐ๋ผ ์ ์ฅ์๋ฅผ ๊ฒฐ์ ํด์ผ ํฉ๋๋ค. ํด๋ผ์ด์ธํธ ์ ์ฅ์๋ฅผ ์ฌ์ฉํ๋ ๋ช ๊ฐ์ง ์ฌ๋ก๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์ฌ๋ก 1. ๋ฉํฐ ํญ ๋ค์ค ๋ก๊ทธ์ธ ๋ฐฉ์ง
SessionStorage์ ๊ฒฝ์ฐ ๋ค๋ฅธ ํญ(์ธ์
)์์ ์ ๊ทผ์ด ๋ถ๊ฐ๋ฅ ํ๋ฏ๋ก, ํด๋น ๊ฒฝ์ฐ์๋ LocalStoage๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
์ฌ๋ก 2. ๋ค๊ตญ์ด ํ์ด์ง ์ธ์ด ์ ํ
์ฌ์ฉ์๊ฐ ๋ณด๊ณ ์๋ ํญ์์๋ง ์ธ์ด ์ ํ์ด ๋ฐ๋์ด์ผ ํ๋ค๋ฉด, SessionStorage๊ฐ ์ ๋นํฉ๋๋ค.
์ฌ๋ก 3. ๊ด๊ณ ๋ค์ ๋ณด์ง ์๊ธฐ ํด๋ฆญ
์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ซ๊ณ , ์ดํ์๋ ํด๋น ๊ด๊ณ ๋ฅผ ๋ณด์ง ์๊ฒ ํ๊ธฐ ์ํด์ LocalStorage๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
WebStorage ์ฌ์ฉ๋ฒ (JavaScript)
- LocalStorage
// LocalStorage์ ๋ฐ์ดํฐ ์ ์ฅํ๊ธฐ localStorage.setItem('myKey', 'myValue'); // LocalStorage์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ const value = localStorage.getItem('myKey'); // value: 'myValue' // LocalStorage์์ ๋ฐ์ดํฐ ์ง์ฐ๊ธฐ localStorage.removeItem('myKey'); // LocalStorage ๋ชจ๋ ๋ฐ์ดํฐ ์ง์ฐ๊ธฐ localStorage.clear();
- SessionStorage
// SessionStorage์ ๋ฐ์ดํฐ ์ ์ฅํ๊ธฐ sessionStorage.setItem('mySessionKey', 'mySessionValue'); // SessionStorage์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ const sessionValue = sessionStorage.getItem('mySessionKey'); // sessionValue: 'mySessionKey' // SessionStorage์์ ๋ฐ์ดํฐ ์ง์ฐ๊ธฐ sessionStorage.removeItem('mySessionKey'); // SessionStorage๋ชจ๋ ๋ฐ์ดํฐ ์ง์ฐ๊ธฐ sessionStorage.clear();
์ค์ต
์ง์ ๋ธ๋ผ์ฐ์ ์ ์ฅ์๋ฅผ ํ์ธํด ๋ณด์ธ์.
๋ง๋ฌด๋ฆฌ
์น ์ ํ๋ฆฌ์ผ์ด์
์์ ๋ฐ์ดํฐ๋ฅผ ํจ์จ์ ์ผ๋ก ์ ์ฅํ๊ธฐ ์ํ ์น ์คํ ๋ฆฌ์ง, LocalStorage์ SessionStorage์ ๋ํด ์งง๊ฒ ๋ค๋ฃจ์์ต๋๋ค.
LocalStorage๋ ์ง์์ ์ธ ๋ฐ์ดํฐ ์ ์ฅ์ ์ ํฉํ๋ฉฐ, SessionStorage๋ ์์ ์ธ์
๋ด ๋ฐ์ดํฐ ์ ์ฅ์ ์ด์์ ์
๋๋ค.
๊ฐ๋ฐ ๋ชฉ์ ๊ณผ ์ฌ์ฉ์์ ์๊ตฌ์ ๋ฐ๋ผ ์ ์ ํ ์ ์ฅ์๋ฅผ ์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ด ํฌ์คํธ๋ฅผ ํตํด ์น ์คํ ๋ฆฌ์ง์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ์ดํด๋ฅผ ์ป์ผ์
จ๊ธธ ๋ฐ๋๋๋ค.
Share article