๐Ÿ’ป ์ฟ ํ‚ค ๊ทธ๋ฆฌ๊ณ  localStorage ์™€ sessionStorage

waterglassesยท2022๋…„ 4์›” 4์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
12/50
post-thumbnail

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์™€ ์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€ ๊ทธ๋ฆฌ๊ณ  ์ฟ ํ‚ค์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.
โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค

๐Ÿ“ƒ ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

๋ธŒ๋ผ์šฐ์ €์— ์ €์žฅ๋˜๋Š” ์ž‘์€ ํฌ๊ธฐ์˜ ๋ฌธ์ž์—ด๋กœ HTTP ํ”„๋กœํ† ์ฝœ์˜ ์ผ๋ถ€์ด๋‹ค.
์ฟ ํ‚ค๋Š” ํด๋ผ์ด์–ธํŠธ ์‹๋ณ„๊ณผ ๊ฐ™์€ ์ธ์ฆ์— ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ธ๋‹ค.

์ฟ ํ‚ค ์ฝ๊ธฐ

document.cookie

name=value์Œ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๊ณ , ๊ฐ ์Œ์€ ;๋กœ ๊ตฌ๋ถ„ํ•œ๋‹ค. ;๋ฅผ ๊ธฐ์ค€์œผ๋กœ document.cookie์˜ ๊ฐ’์„ ๋ถ„๋ฆฌํ•˜๋ฉด ์›ํ•˜๋Š” ์ฟ ํ‚ค๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ๋‹ค.

์ฟ ํ‚ค ์“ฐ๊ธฐ

document.cookie = "user=waterglasses";

์ฟ ํ‚ค ์œ ํšจ๊ธฐ๊ฐ„ ์„ค์ •
expires๋‚˜ mag-age ์˜ต์…˜์„ ์„ค์ •ํ•œ๋‹ค.
์œ ํšจ๊ธฐ๊ฐ„์ด ์ง€์ •๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฉด, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹ซํž ๋•Œ ์ฟ ํ‚ค๋„ ํ•จ๊ป˜ ์‚ญ์ œ๋œ๋‹ค. ์ด๋Ÿฐ ์ฟ ํ‚ค๋ฅผ ์„ธ์…˜ ์ฟ ํ‚ค๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.

localStorage์™€ sessionStorage

์›น ์Šคํ† ๋ฆฌ์ง€ ๊ฐ์ฒด localStorage์™€ sessionStorage๋Š” ๋ธŒ๋ผ์šฐ์ € ๋‚ด์— ํ‚ค-๊ฐ’ ์Œ์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.
์ฟ ํ‚ค์™€ ๋‹ค๋ฅด๊ฒŒ ์›น ์Šคํ† ๋ฆฌ์ง€ ๊ฐ์ฒด๋Š” ๋„คํŠธ์›Œํฌ ์š”์ฒญ ์‹œ ์„œ๋ฒ„๋กœ ์ „์†ก๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ฟ ํ‚ค๋ณด๋‹ค ๋” ๋งŽ์€ ์ž๋ฃŒ๋ฅผ ๋ณด๊ด€ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ ์ฟ ํ‚ค์™€ ๋˜ ๋‹ค๋ฅด์ ์€ ์„œ๋ฒ„๊ฐ€ HTTP ํ—ค๋”๋ฅผ ํ†ตํ•ด ์Šคํ† ๋ฆฌ์ง€ ๊ฐ์ฒด๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

localStorage

์˜ค๋ฆฌ์ง„(domain/port/protocol)์ด ๊ฐ™์€ ๊ฒฝ์šฐ ๋ชจ๋“  ํƒญ๊ณผ ์ฐฝ์—์„œ ๊ณต์œ ๋˜๊ณ  ๋ธŒ๋ผ์šฐ์ €๋‚˜ OS๊ฐ€ ์žฌ์‹œ์ž‘ํ•˜๋”๋ผ๋„ ๋ฐ์ดํ„ฐ๊ฐ€ ํŒŒ๊ดด๋˜์ง€ ์•Š๋Š”๋‹ค.

์ถ”๊ฐ€ํ•˜๊ธฐ

localStorage.setItem('test', 1);
localStorage.name = 'waterglasses';
localStorage['name'] = 'waterglasses';

์ฝ์–ด์˜ค๊ธฐ

localStorage.getItem('test'); //1

sessionStorage

localStorage๊ฐ์ฒด์— ๋น„ํ•ด ์ž์ฃผ ์‚ฌ์šฉ๋˜์ง€๋Š” ์•Š๋Š”๋‹ค. ์ œ๊ณตํ•˜๋Š” ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋Š” ๊ฐ™์ง€๋งŒ, ํ›จ์”ฌ ์ œํ•œ์ ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
sessionStorage๋Š” ํ˜„์žฌ ๋–  ์žˆ๋Š” ํƒญ์—์„œ๋งŒ ์œ ์ง€๋œ๋‹ค. ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•  ๋•Œ sessionStorage์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋Š” ์‚ฌ๋ผ์ง€์ง€ ์•Š์ง€๋งŒ ํƒญ์„ ๋‹ซ๊ณ  ์—ด ๋•Œ๋Š” ์‚ฌ๋ผ์ง„๋‹ค.

๐Ÿ”ฅ ์˜ค๋Š˜์˜ ๋Š๋‚€์ 

์ •๋ฆฌ๋Š” ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์™€ ์„ธ์…˜ ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์œ„์ฃผ๋กœ ์ •๋ฆฌํ•˜์˜€์ง€๋งŒ TodoList ๊ตฌํ˜„์„ ์œ„์ฃผ๋กœ ๊ณต๋ถ€ํ•˜์˜€๋‹ค.
์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธํ™” ์‹œ์ผœ์„œ ํ™•์žฅ์‹œํ‚ค๋Š”์ง€์— ๋Œ€ํ•ด์„œ ์กฐ๊ธˆ์€ ์•Œ ๊ฒƒ๋งŒ ๊ฐ™์•˜๋˜ ๋‚ ์ด๋‹ค. ๊ณผ์ œ๋ฅผ ์‹œ์ž‘ํ•˜๋ ค๋ฉด ์ด๊ฒƒ์— ๋Œ€ํ•ด์„œ ์ฒดํ™”์‹œ์ผœ์•ผ์•ผ๋งŒ ํ•  ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋ฒˆ์—๋Š” ๊ณผ์ œ์— ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์‚ด์„ ๋ถ™์—ฌ์„œ ์ง„ํ–‰ํ•ด๋ณด๋ ค๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ ๊ณผ์ œ ์ฃผ์š” ๊ตฌํ˜„์‚ฌํ•ญ๋„ ์ œ๋Œ€๋กœ ๋ชปํ•  ๊ฒƒ ๊ฐ™์•„ ๊ธฐ๋ณธ์—๋งŒ ์ถฉ์‹คํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

๐Ÿ—ฃ ์˜ค๋Š˜์˜ TMI

์—ด์ด 38.6๋„๊นŒ์ง€ ์˜ฌ๋ผ๊ฐ”๋‹ค.. ์ด๊ฒŒ ๋งž๋‚˜?๐Ÿค’ ์˜ค๋Š˜ ๊ณต๋ถ€๋ฅผ ๋” ํ•˜๋ คํ–ˆ๋Š”๋ฐ ๋ชธ์ƒํƒœ๊ฐ€ ์ง„์งœ ์ตœ์ตœ์ตœ์ตœ์ตœ์•…!๐Ÿ˜ตโ€๐Ÿ’ซ
ํ•  ๊ฒƒ๋„ ๋งŽ์€๋ฐ ์ง„์งœ ๋„ˆ๋ฌด๋„ˆ๋ฌด ์†์ƒํ•˜๋‹ค. ์ง€๊ธˆ๋„ ์—ด์ด ํŽ„ํŽ„.. ๊ทธ๋ ‡์ง€๋งŒ TIL ํฌ๊ธฐ ๋ชปํ•ด..

Refer

ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฐ๋ธŒ์ฝ”์Šค
์ฟ ํ‚ค์™€ document.cookie
localStorage์™€ sessionStorage

์˜ค๋Š˜์˜ ๋‚ด์šฉ ์ •๋ฆฌ

๋ฐ๋ธŒ์ฝ”์Šค Day11 TIL

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2022๋…„ 4์›” 4์ผ

์˜ค๋งˆ์ด๊ฐ“... ์•„ํ”„์‹œ๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค๐Ÿ˜ญ

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2022๋…„ 4์›” 4์ผ

๊ทธ๋Ÿฌ๊ฒŒ์š” ์ปดํฌ๋„ŒํŠธํ™”๋ฅผ ์ฒดํ™”๋ฅผ ์ž˜ ์‹œ์ผœ์•ผํ• ํ…๋ฐ... ์ „ ์ปดํฌ๋„ŒํŠธ ์ „์— ๋ฐ”๋‹๋ผ JS๋ž‘๋„ ๋‚ฏ์„ ๊ฐ€๋ฆฌ๊ณ  ์žˆ์–ด์š”ใ…‹ใ…‹ใ…‹ ใ… ใ… ใ… ใ… ใ… 

1๊ฐœ์˜ ๋‹ต๊ธ€