LocalStorage vs SessionStorage ์‚ดํŽด๋ณด๊ธฐ

Sep 01, 2023
LocalStorage vs SessionStorage ์‚ดํŽด๋ณด๊ธฐ
์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ๋•Œ ๋ฐ์ดํ„ฐ๋ฅผ ํด๋ผ์ด์–ธํŠธ ์ธก์— ์ €์žฅํ•ด์•ผ ํ•  ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฃผ๋กœ ์ฟ ํ‚ค๋‚˜ ์›น ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, ๊ทธ ์ค‘ ์›น ์Šคํ† ๋ฆฌ์ง€์˜ ๋‘ ์ข…๋ฅ˜์ธ โ€˜LocalStorageโ€™์™€ โ€˜SessionStorageโ€™๋ฅผ ์ •๋ฆฌํ•ด ๋ณด๋ ค ํ•ฉ๋‹ˆ๋‹ค.
 

์›น ์Šคํ† ๋ฆฌ์ง€(Web Storage)๋ž€?

 
์šฐ์„  ์›น ์Šคํ† ๋ฆฌ์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋ฉด, ์›น ์Šคํ† ๋ฆฌ์ง€๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ‚ค์™€ ๊ฐ’์˜ ํ˜•ํƒœ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ์ €์žฅ์†Œ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ์ฟ ํ‚ค(Cookie)์™€๋Š” ๋‹ฌ๋ฆฌ, ๋ฐ์ดํ„ฐ์˜ ํฌ๊ธฐ ์ œํ•œ์ด ํฌ๊ณ , ์„œ๋ฒ„์— ์ž๋™์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ์ „์†ก๋˜์ง€ ์•Š์•„ ์„ฑ๋Šฅ์— ๋” ์œ ๋ฆฌํ•œ ํŠน์ง•์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.
 
๋ธŒ๋ผ์šฐ์ € ๊ฐœ๋ฐœ์ž๋„๊ตฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ €์žฅ์†Œ์— ์ €์žฅ๋œ ๊ฐ’์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
notion image
๋ธŒ๋ผ์šฐ์ €๋ณ„ ์ €์žฅ์†Œ
  • Microsoft Edge: ๊ฐœ๋ฐœ์ž๋„๊ตฌ โ†’ ์‘์šฉํ”„๋กœ๊ทธ๋žจ โ†’ ์ €์žฅ์†Œ
  • Firefox: ๊ฐœ๋ฐœ์ž๋„๊ตฌ โ†’ ์ €์žฅ์†Œ
  • Chrome: ๊ฐœ๋ฐœ์ž๋„๊ตฌ โ†’ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜
 
 

์ฟ ํ‚ค(Cookie) vs ์›น ์Šคํ† ๋ฆฌ์ง€(Web Storage)

ใ…ค
Cookie
Web Storage
๊ตฌ์กฐ
โ€˜Cookie-name : Cookie-valueโ€™
โ€˜Key : Valueโ€™
์ €์žฅ ๋ฐ์ดํ„ฐ
๋ฌธ์ž์—ด
๋ฌธ์ž์—ด ๊ฐ์ฒด
์šฉ๋Ÿ‰
์•ฝ 4KB
์•ฝ 10MB
๊ฐฏ์ˆ˜
์•ฝ 150๊ฐœ
์ œํ•œ ์—†์Œ
์†Œ๋ฉธ ์‹œ๊ฐ„ ์„ค์ •
๊ฐ€๋Šฅ
๋ถˆ๊ฐ€๋Šฅ
์ž์› ์†Œ๋ชจ
๋งŽ์Œ (๋งค๋ฒˆ ์„œ๋ฒ„๋กœ ์ „์†ก)
์ ์Œ (ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋งŒ ์ „์†ก)
[์ถœ์ฒ˜]
 

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
RSSPowered by inblog