[FE - ConnecTo] DAY53 TIL๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป (Local Storage, Session Storage, Cookie์˜ ์ฐจ์ด๊ฐ€ ๋ญ์•ผ..?)

JUNYยท2022๋…„ 9์›” 26์ผ
0

๐Ÿ“šZeroBase ConnecTo Front-End

๋ชฉ๋ก ๋ณด๊ธฐ
41/53
post-thumbnail

22.09.26 ์ˆ˜์—… ์‹œ๊ฐ„ ์ค‘ ๊ณต๋ถ€ํ•œ ๋‚ด์šฉ๋“ค์„ ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค ๐Ÿ˜Š
ํ”ผ๋“œ๋ฐฑ์€ ์–ธ์ œ๋‚˜ ํ™˜์˜์ž…๋‹ˆ๋‹ค! ๐ŸŠ

์˜ค๋Š˜ Pair Programming์„ ํ•˜๋‹ค ๊ณ ๋ฏผ์„ ํ–ˆ๋˜ ๋ถ€๋ถ„๋“ค์ด ์žˆ์–ด์„œ ์ง์ง€์™€ ํ•จ๊ป˜ ๊ณต๋ถ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ œ์‹œ๋˜์–ด์žˆ๋˜ ์กฐ๊ฑด์€, ์˜์†์ ์ธ ์ €์žฅ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•˜๋‹ค ์˜€๋Š”๋ฐ, Local Storage, Session Storage, Cookie ์ค‘, ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•ด์•ผํ• ์ง€ ๊ณ ๋ฏผ์„ ํ–ˆ๊ณ , ์ด๋“ค์˜ ์ฐจ์ด์ ์„ ์ •๋ฆฌํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿค”


Web Storage

Web Storage์˜ ๊ฐœ๋…์€ ํ‚ค/๊ฐ’ ์Œ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ํ‚ค๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐํšŒํ•˜๋Š” ํŒจํ„ด์ด๋ฉฐ,
์˜๊ตฌ์ €์žฅ์†Œ(LocalStorage)์™€ ์ž„์‹œ์ €์žฅ์†Œ(SessionStorage)๋ฅผ ๋”ฐ๋กœ ๋‘์–ด ๋ฐ์ดํ„ฐ์˜ ์ง€์†์„ฑ์„ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ์–ด ์‘์šฉ ํ™˜๊ฒฝ์— ๋งž๋Š” ์„ ํƒ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Web Storage๋Š” ๊ธฐ์กด ์›น ํ™˜๊ฒฝ์˜ ์ฟ ํ‚ค(Cookie)์™€ ๋งค์šฐ ์œ ์‚ฌํ•œ ๊ฐœ๋…์ด์ง€๋งŒ, ์ฟ ํ‚ค์˜ ๋‹จ์ ์„ ๊ทน๋ณตํ•˜๋Š” ๊ฐœ์„ ์ ์ด ๋„์ž…๋˜์—ˆ์Šต๋‹ˆ๋‹ค.


Local Storage

  • ๋กœ์ปฌ์— ๋„๋ฉ”์ธ ๋ณ„๋กœ ์ง€์†๋˜๋Š” storage์ž…๋‹ˆ๋‹ค.
  • local storage๋Š” ์‹œ๊ฐ„ ์ œํ•œ์ด ์—†๊ณ , ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊บผ์ ธ๋„ ์ง€์›Œ์ง€์ง€ ์•Š์œผ๋ฉฐ, ๊ฐ’์„ ์ง€์šฐ๋ ค๋ฉด ์ง์ ‘ ์ง€์›Œ์ค˜์•ผํ•ฉ๋‹ˆ๋‹ค.
  • ํด๋ผ์ด์–ธํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Session Storage

  • ์„ธ์…˜(ํ”„๋กœ์„ธ์Šค, ํƒญ, ๋ธŒ๋ผ์šฐ์ €)์ด ์ข…๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ์ง€์†๋˜๋Š” storage์ž…๋‹ˆ๋‹ค.
  • session storage๋Š” ์„ธ์…˜์ด ์ข…๋ฃŒ๋จ๊ณผ ๋™์‹œ์— ๊ฐ’์ด ์ง€์›Œ์ง‘๋‹ˆ๋‹ค. ์ด ์†Œ๋ฉธ ํƒ€์ด๋ฐ์ด local storage์™€ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์ž…๋‹ˆ๋‹ค.

Cookies

  • ์ฟ ํ‚ค๋Š” ์„œ๋ฒ„์ธก๊ณผ ํด๋ผ์ด์–ธํŠธ์ธก ์–‘์ชฝ์—์„œ ์ฟ ํ‚ค ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” api๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.
  • ์ด๋Ÿฐ ์ด์œ ๋กœ ์ €์žฅ๋œ ์ฟ ํ‚ค ๋ฐ์ดํ„ฐ์˜ ์“ฐ์ž„์ด ์–‘์ชฝ ๋ชจ๋‘์ด๋ƒ๋ฅผ ๊ณ ๋ คํ•ด์•ผํ•˜๋ฉฐ, ๋งŒ์•ฝ ์„œ๋ฒ„์ชฝ ์‚ฌ์šฉ์ด ํ•„์ˆ˜์ ์ด๊ณ  ์žฆ๋‹ค๋ฉด ๋กœ์ปฌ ์ €์žฅ์†Œ๊ฐ€ ์•„๋‹Œ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„์™€์˜ ์ธํ„ฐ๋ ‰์…˜์ด ์ข€ ๋” ํšจ๊ณผ์ ์ธ ์ฟ ํ‚ค๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๋ณดํ†ต ์šฐ๋ฆฌ๊ฐ€ ์–ด๋–ค ์›น์‚ฌ์ดํŠธ์— ๋“ค์–ด๊ฐ€๋ฉด ํ•ญ์ƒ ๋ณด๋Š”ย ๊ด‘๊ณ  7์ผ ๋™์•ˆ ๋ณด์ง€ย ์•Š๊ธฐ ์—ญ์‹œ ์ฟ ํ‚ค ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์—๋Š”ย ๊ธฐ๊ฐ„ ๊ธฐ๋Šฅ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

Web Storage vs Cookies

  • ์‚ฌ์ดํŠธ์˜ ๋„๋ฉ”์ธ ๋‹จ์œ„๋กœ ์ ‘๊ทผ์ด ์ œํ•œ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋ฐ์ดํ„ฐ์˜ ๋ณด์•ˆ ์ธก๋ฉด์—์„œ๋Š” ๋‹น์—ฐํ•œ ์ด์•ผ๊ธฐ์ž…๋‹ˆ๋‹ค.
Web StorageCookies
- ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ํด๋ผ์ด์–ธํŠธ์— ์กด์žฌํ•  ๋ฟ, ์„œ๋ฒ„๋กœ ์ „์†ก์€ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.์ด๋Š” ๋„คํŠธ์›Œํฌ ํŠธ๋ž˜ํ”ฝ ๋น„์šฉ์„ ์ค„์—ฌ์ค๋‹ˆ๋‹ค.- ๋งค๋ฒˆ ์„œ๋ฒ„๋กœ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.
- ์šฉ๋Ÿ‰์˜ ์ œํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค.- ๊ฐœ์ˆ˜์™€ ์šฉ๋Ÿ‰์— ์ œํ•œ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
- ๋ฐ์ดํ„ฐ๋ฅผ ์˜๊ตฌ์ ์œผ๋กœ ์ €์žฅ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.- ๋งŒ๋ฃŒ์ผ์ž๋ฅผ ์ง€์ •ํ•˜๊ฒŒ ๋˜์–ด ์žˆ์–ด์„œ ์–ธ์  ๊ฐ€๋Š” ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค.

Local Storage vs Session Storage

Local StorageSession Storage
- ๋ฐ์ดํ„ฐ๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ์ง€์šฐ์ง€ ์•Š๋Š” ์ด์ƒ ์˜๊ตฌ์ ์œผ๋กœ ๋ณด๊ด€์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.- session์ด ์ข…๋ฃŒ๋จ๊ณผ ๋™์‹œ์— Session Storage๊ฐ€ ์‚ญ์ œ๋˜๋ฏ€๋กœ, ๋ฐ์ดํ„ฐ๊ฐ€ ์ง€์›Œ์ง‘๋‹ˆ๋‹ค.
- ๋„๋ฉ”์ธ๋งˆ๋‹ค ๋ณ„๋„๋กœ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.- ๊ฐ™์€ ์‚ฌ์ดํŠธ์˜ ๊ฐ™์€ ๋„๋ฉ”์ธ์ด๋ผ๊ณ  ํ• ์ง€๋ผ๋„, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ค๋ฅด๋ฉด ์„œ๋กœ ๋‹ค๋ฅธ ์˜์—ญ์ด ๋ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ์ปจํ…์ŠคํŠธ๊ฐ€ ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
- ๋„๋ฉ”์ธ๋งŒ ๊ฐ™์œผ๋ฉด ์ „์—ญ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ๊ณต์œ ๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.- ๋„๋ฉ”์ธ์ด ๊ฐ™๋”๋ผ๋„ ์„œ๋กœ ๋‹ค๋ฅธ ๋ณ„๊ฐœ์˜ ์˜์—ญ์ด๊ธฐ ๋•Œ๋ฌธ์— ์„œ๋กœ ์นจ๋ฒ”ํ•˜์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.
- Windows ์ „์—ญ ๊ฐ์ฒด์˜ Local Storage๋ผ๋Š” ์ปฌ๋ ‰์…˜์„ ํ†ตํ•ด ์ €์žฅ๊ณผ ์กฐํšŒ๊ฐ€ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค.- Windows ์ „์—ญ ๊ฐ์ฒด์˜ Session Storage๋ผ๋Š” ์ปฌ๋ ‰์…˜์„ ํ†ตํ•ด ์ €์žฅ๊ณผ ์กฐํšŒ๊ฐ€ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค.

๐Ÿ“šย ์ถœ์ฒ˜

profile
์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๐ŸŒผ

0๊ฐœ์˜ ๋Œ“๊ธ€