[TIL๐Ÿ”ฅ]Day12(8/18)

dasssseulยท2021๋…„ 8์›” 18์ผ
0

Today I Learned

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

Introduction

์˜ค๋Š˜์€ ์ฃผ๋กœ ์‹ค์Šต ์œ„์ฃผ์˜ ๊ฐ•์˜๋ฅผ ๋“ค์—ˆ๋‹ค.
๋ฐ”๋‹๋ผ JS๋กœ ํ† ๊ธ€ ๋ฒ„ํŠผ์„ ๋งŒ๋“ค๊ณ  ๊ฐ„๋‹จํ•œ TodoList๋„ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค.
์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ๊ธฐ๋Šฅ์„ ๊ณ„์† ์ชผ๊ฐœ๊ฐ€๋ฉฐ ๊ตฌํ˜„ํ•˜๋Š” ํ˜•์‹์„ ์ฒ˜์Œ ์ ‘ํ•ด๋ณด์•˜๋Š”๋ฐ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋†’๋‹ค๋Š” ๊ฑธ ๋Š๊ผˆ๋‹ค.
๋ฐ”๋‹๋ผ JS์˜ ๊ฒฝ์šฐ ์‚ฌ์‹ค ๋…ธ๋งˆ๋“œ์ฝ”๋” ๊ฐ•์˜๋กœ ํ•œ๋ฒˆ ์ ‘ํ•ด๋ณธ ๊ฒƒ์ด ์ฒ˜์Œ์ด๋ผ ๊ฐ•์˜๋ฅผ ๋“ค์„๋•Œ ์ฃผ๋กœ ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ผํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์ดํ•ดํ•˜๋ฉฐ ๋„˜์–ด๊ฐ”๋‹ค. ์ด๋ฒˆ ์ฃผ๋ง์— ๊ผญ ํ˜ผ์ž ํž˜์œผ๋กœ ๊ตฌํ˜„ํ•ด๋ณด์•„์•ผ๊ฒ ๋‹ค.


์˜ค๋Š˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ

1. ์ปดํฌ๋„ŒํŠธ ๋ฐฉ์‹์œผ๋กœ TodoList ๊ตฌํ˜„ ๐Ÿ“
2. Local Storage ๐Ÿ—„

์˜ค๋Š˜์€ Local Storage์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์ •๋ฆฌํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.


๐Ÿ—„ Local Storage

  • key, value ๊ธฐ๋ฐ˜์œผ๋กœ Local์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋‹ค
  • ๋„๋ฉ”์ธ ๊ธฐ๋ฐ˜์œผ๋กœ Storage๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค
    • ๋„๋ฉ”์ธ๋งŒ ๊ฐ™๋‹ค๋ฉด ์—ฌ๋Ÿฌ ํƒญ ๋‚ด์—์„œ ๊ฐ™์€ Storage๊ฐ€ ๊ณต์œ ๋œ๋‹ค
  • ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ Storage๋ฅผ ๋‚ ๋ฆฌ์ง€ ์•Š๋Š” ํ•œ ์‚ญ์ œ๋˜์ง€์•Š๋Š”๋‹ค

๋ฐ์ดํ„ฐ ์ €์žฅ, ๋ถˆ๋Ÿฌ์˜ค๊ธฐ, ์‚ญ์ œํ•˜๊ธฐ


// window ์ƒ๋žต ๊ฐ€๋Šฅ

// ์ €์žฅํ•˜๊ธฐ
localStorage.setItem('name', 'daseul')

// ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
const storedName = localStorage.getItem('name') 

// ์‚ญ์ œํ•˜๊ธฐ
localStorage.removeItem('name')

// ์ „์ฒด ์‚ญ์ œํ•˜๊ธฐ
localStorage.clear()

์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ์ ์€ Local Storage์—๋Š” String ํƒ€์ž…๋งŒ ๋„ฃ์„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— JSON.stringify ๋กœ ๋„ฃ๊ณ  JSON.parse ๋กœ ๊ฐ’์„ ๊บผ๋‚ด ํŒŒ์‹ฑํ•ด์„œ ์“ฐ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

์ฝ”๋“œ ์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด ์•Œ์•„๋ณด์ž.

// JSON.stringify์™€ JSON.parse
const user = {
	name: 'daseul',
	age: '26',
	gender: 'woman'
}

// ์ €์žฅํ•˜๊ธฐ
localStorage.setItem('user', JSON.stringify(user))

// ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
const storedName = JSON.parse(localStorage.getItem('user'))

Session Storage์™€์˜ ๋น„๊ต

์‚ฌ์‹ค ์Šคํ† ๋ฆฌ์ง€์˜ ์ข…๋ฅ˜์—๋Š” ํ•œ ๊ฐ€์ง€๊ฐ€ ๋” ์žˆ๋Š”๋ฐ ๊ทธ๊ฒƒ์ด ๋ฐ”๋กœ Session Storage์ด๋‹ค.

  • Session Storage์˜ ๊ฒฝ์šฐ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋‹ซ์œผ๋ฉด ์ €์žฅ๋œ ๋‚ด์šฉ์ด ์ดˆ๊ธฐํ™”
  • Local Storage์˜ ๊ฒฝ์šฐ ๋„๋ฉ”์ธ ๊ธฐ๋ฐ˜์œผ๋กœ Storage๊ฐ€ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋„๋ฉ”์ธ๋งŒ ๊ฐ™๋‹ค๋ฉด ์˜๊ตฌ ์ €์žฅ

Comment

๋ฌด์–ธ๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ ๊ฐ’์„ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์ €์žฅํ•˜๊ณ , ๊ทธ ๊ฐ’์„ ๊บผ๋‚ด ์ด์šฉํ•˜๋Š” ๋ถ€๋ถ„์€ ๊ผญ ํ•„์š”ํ•˜๋‹ค.
๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์˜ ํŠน์ง•๊ณผ ์‚ฌ์šฉ๋ฒ•์„ ํ™•์‹คํžˆ ์ตํ˜€ ํ”„๋กœ์ ํŠธ์— ์ž˜ ์ ์šฉํ•˜๋„๋ก ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค.
์•„ ๊ทธ๋ฆฌ๊ณ  ์˜ค๋Š˜์€ ํŒ€์›๋“ค๊ณผ ๋‘๋ฒˆ์งธ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์ง„ํ–‰ํ–ˆ๋‹ค.
ํ™•์‹คํžˆ ์ฒ˜์Œ๋ณด๋‹ค๋Š” ์–ด๋–ค ์ ์„ ์ฝ”๋“œ ๋ฆฌ๋ทฐ์— ์ ์–ด์•ผํ•˜๊ณ , ํŒ€์›๋“ค์˜ ์ฝ”๋“œ์—์„œ ๋ฐฐ์šธ์ ์ด ๋ฌด์—‡์ธ์ง€ ๊นจ๋‹ฌ์•˜๋‹ค.
๊ณ„์†ํ•ด์„œ ์„œ๋กœ ์œˆ์œˆํ•˜๋Š” ๊ทธ๋Ÿฐ 5๊ฐœ์›”์ด ๋˜๋„๋ก ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค~๐Ÿฅฐ

profile
์ธ์ƒ์€ ์šฉ๊ธฐ์˜ ์–‘์— ๋”ฐ๋ผ ์ค„์–ด๋“ค๊ฑฐ๋‚˜, ๋Š˜์–ด๋‚œ๋‹ค

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