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์ฃผ์ฐจ์ธ๋ฐ ๋์จํด์ง์ง ๋ง๊ณ ์ฒ์์ฒ๋ผ ๊ฐ๋ฐ ๊ณต๋ถ์ ์ง์คํด์ผ์ง!!