๊ฐœ๋ฐœ ๊ณต๋ถ€/๋ฐ๋ธŒ์ฝ”์Šค TIL

[ํด๋ผ์šฐ๋”ฉ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์—”์ง€๋‹ˆ์–ด๋ง TIL] 240219 - localStorage

๊ฐ€์šค์ด 2024. 2. 19. 19:49

Intro


์˜ค๋Š˜์€ localStorage ์•ˆ์— ์ผ๊ธฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์–ด ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์„ ํ”„๋กœ์ ํŠธ์— ์ถ”๊ฐ€ํ•˜์˜€๋‹ค.

 

 

์˜ค๋Š˜ ํ•™์Šตํ•œ ๋‚ด์šฉ


LocalStorage๋ฅผ ์ผ๊ธฐ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋กœ ์‚ฌ์šฉํ•˜๊ธฐ

 

Web Storage API - Web APIs | MDN

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

developer.mozilla.org

  • ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์—์„œ ๋ฐ์ดํ„ฐ ์ €์žฅํ•˜๊ธฐ
localStorage.setItem('diary', data)

 

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋Š” key, valueํ˜•ํƒœ๋กœ ๊ฐ’์„ ์ €์žฅํ•œ๋‹ค.

๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€๋Š”๋Š” string์œผ๋กœ ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ ์ €์žฅํ•  ๋• ์ง๋ ฌํ™”๊ฐ€ ํ•„์š”ํ•˜๋‹ค. (JSON.stringify)

 

  • ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์—์„œ ๋ฐ์ดํ„ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
localStorage.getItem('diary')

 

์ €์žฅ๋œ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ ๋ถˆ๋Ÿฌ์˜ฌ ๋• ๋ฐ์ดํ„ฐ๋ฅผ ํŒŒ์‹ฑํ•˜๋Š” ๊ณผ์ •์ด ํ•„์š”ํ•˜๋‹ค. (JSON.parse)

 

 

 

 

 

 

๋งˆ๋ฌด๋ฆฌ


์˜ค๋Š˜์€ ๊ฐ•์˜๊ฐ€ ์–ด๋ ต์ง€ ์•Š์•„์„œ ๊ธฐ์กด์— ๋ฐฐ์› ๋˜ ๋‚ด์šฉ์„ ๋ณต์Šตํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๊ฐ•์˜๊ฐ€ ๋ฒŒ์จ 10์ฃผ์ฐจ์ธ๋ฐ ๋А์Šจํ•ด์ง€์ง€ ๋ง๊ณ  ์ฒ˜์Œ์ฒ˜๋Ÿผ ๊ฐœ๋ฐœ ๊ณต๋ถ€์— ์ง‘์ค‘ํ•ด์•ผ์ง€!!