2022-05-12 TIL
Web Storage - Local Storage, Session Storage
HTML5 ์๋ ์น์ ๋ฐ์ดํฐ๋ฅผ ํด๋ผ์ด์ธํธ์ ์ ์ฅํ ์ ์๋ ์๋ก์ด ์๋ฃ๊ตฌ์กฐ์ธ Web Storage ์คํ์ด ํฌํจ๋์ด ์๋ค.
Web Storage์ ๊ฐ๋ ์ ํค/๊ฐ ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ํค๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์กฐํํ๋ ํจํด์ด๋ค. ๊ทธ๋ฆฌ๊ณ ์๊ตฌ ์ ์ฅ์(Local Storage)์ ์์์ ์ฅ์(Session Storage)๋ฅผ ๋ฐ๋ก ๋์ด ๋ฐ์ดํฐ์ ์ง์์ฑ์ ๊ตฌ๋ถํ ์ ์์ด ์์ฉ ํ๊ฒฝ์ ๋ง๋ ์ ํ์ด ๊ฐ๋ฅํ๋ค.
Web Storage๋ ๊ธฐ์กด ์น ํ๊ฒฝ์ ์ฟ ํค(Cookie)์ ๋งค์ฐ ์ ์ฌํ ๊ฐ๋ ์ด๋ค. ์ฌ์ค ๊ฑฐ์ ์ฐจ์ด๊ฐ ์์ง๋ง ๋ช ๊ฐ์ง ์ฟ ํค์ ๋จ์ ์ ๊ทน๋ณตํ๋ ๊ฐ์ ์ ์ด ๋์ ๋์๋ค. ๊ทธ๋ฌ๋ ์ฟ ํค๋ ์ฌ์ ํ ์ ํจํ๊ณ ๊ฝค ์ ์ ํ ํด๋ผ์ด์ธํธ ์ ์ฅ๋๊ตฌ์์ ํ๋ฆผ์๋ค. HTML5 ์์ Web Storage ์คํ์ ์๋ก ์ถ๊ฐํ์ง๋ง ์ฟ ํค๋ฅผ ๋ฐฐ์ ํ๋ค๋ ์๋ฏธ๋ ์๋๋ค. HTML5 ์์๋ ์ฌ์ ํ ์ฟ ํค๋ฅผ ์ด์ฉ ๊ฐ๋ฅํ๋ค.
Web Storage์ ์ฐจ์ด์ (cookie์ ๋น๊ต)
์ฟ ํค๋ ๋งค๋ฒ ์๋ฒ๋ก ์ ์ก๋๋ค. ์น ์ฌ์ดํธ์์ ์ฟ ํค๋ฅผ ์ค์ ํ๋ฉด ์ดํ ๋ชจ๋ ์น ์์ฒญ์ ์ฟ ํค์ ๋ณด๋ฅผ ํฌํจํ์ฌ ์๋ฒ๋ก ์ ์ก๋๋ค. Web Storage๋ ์ ์ฅ๋ ๋ฐ์ดํฐ๊ฐ ํด๋ผ์ด์ธํธ์ ์กด์ฌํ ๋ฟ ์๋ฒ๋ก ์ ์ก์ ์ด๋ฃจ์ด์ง์ง ์๋๋ค. ์ด๋ ๋คํธ์ํฌ ํธ๋ํฝ ๋น์ฉ์ ์ค์ฌ ์ค๋ค.
๋จ์ ๋ฌธ์์ด์ ๋์ด(์คํฌ๋ฆฝํธ) ๊ฐ์ฒด์ ๋ณด๋ฅผ ์ ์ฅํ ์ ์๋ค. ๋ฌธ์์ด ๊ธฐ๋ฐ ๋ฐ์ดํฐ ์ด์ธ์ ์ฒด๊ณ์ ์ผ๋ก ๊ตฌ์กฐํ๋ ๊ฐ์ฒด๋ฅผ ์ ์ฅํ ์ ์๋ค๋ ๊ฒ์ ๊ฐ๋ฐ ํธ์์ฑ์ ์ ๊ณตํด์ฃผ๋ ์ฃผ์ํ ์ฅ์ ์ด ๋๋ค. ๋ธ๋ผ์ฐ์ ์ ์ง์ ์ฌ๋ถ๋ฅผ ํ์ธํด ๋ด์ผ ํ๋ ํญ๋ชฉ์ด๋ค.
์ฉ๋์ ์ ํ์ด ์๋ค ์ฟ ํค๋ ๊ฐ์์ ์ฉ๋์ ์์ด ์ ํ์ด ์๋ค. ํ๋์ ์ฌ์ดํธ์์ ์ ์ฅํ ์ ์๋ ์ต๋ ์ฟ ํค ์๋ 20๊ฐ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ํ๋์ ์ฌ์ดํธ์์ ์ ์ฅํ ์ ์๋ ์ต๋ ์ฟ ํค ํฌ๊ธฐ๋ 4KB๋ก ์ ํ๋์ด ์๋ค. ๊ทธ๋ฌ๋ Web Storage์๋ ์ด๋ฌํ ์ ํ์ด ์๋ค. ๊ทธ๋ฌ๋ ์ฟ ํค๋ ํ์ํค๋ฅผ ์ด์ฉํ๋ฉด ์ด๋ฌํ ์ ํ์ ์ผ๋ถ ํด์ํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋๋ถ๋ถ ์ฟ ํค์ ์ ํ์ผ๋ก๊น์ง ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ผ์ด ์๋ค.
์๊ตฌ ๋ฐ์ดํฐ ์ ์ฅ์ด ๊ฐ๋ฅํ๋ค ์ฟ ํค๋ ๋ง๋ฃ์ผ์๋ฅผ ์ง์ ํ๊ฒ ๋์ด ์์ด ์ธ์ ๊ฐ ์ ๊ฑฐ๋๋ค. ๋ง๋ฃ์ผ์๋ก ์ง์ ๋ ๋ ์ง์ ์ฟ ํค๋ ์ ๊ฑฐ๋๋ ๊ฒ์ด๋ค. ๋ง์ฝ ๋ง๋ฃ์ผ์๋ฅผ ์ง์ ํ์ง ์์ผ๋ฉด ์ธ์ ์ฟ ํค๊ฐ ๋๋ค. ๋ง์ผ ์๊ตฌ ์ฟ ํค๋ฅผ ์ํ๋ค๋ฉด ๋ง๋ฃ์ผ์๋ฅผ ๊ต์ฅํ ๋ฉ๊ฒ ์ค์ ํ์ฌ ํด๊ฒฐํ ์ ์๋ค. Web Storage๋ ๋ง๋ฃ๊ธฐ๊ฐ์ ์ค์ ์ด ์๋ค. ์ฆ, ํ๋ฒ ์ ์ฅํ ๋ฐ์ดํฐ๋ ์๊ตฌ์ ์ผ๋ก ์กด์ฌํ๋ ๊ฒ์ด๋ค.
Web Storage์ ์ฟ ํค์ ์ฐจ์ด์ ์ ๋ํด์ Web Storage๊ฐ ํน๋ณํ ์ข์ ์ด์ ๋ ์๋ค๊ณ ๋ด๋ ๋ฌด๋ฐฉํ๋ค. ๋ค๋ง ํ๊ฐ์ง ๋งค๋ฒ ์๋ฒ๋ก ์ ์ก๋์ง ์๋๋ค๋ ํน์ง์ ๊ฝค๋ ์ ์ฉํ๋ค.
Local Storage์ Session Storage
Web Storage๋ ๋ฐ์ดํฐ์ ์ง์์ฑ๊ณผ ๊ด๋ จํ์ฌ ๋ ๊ฐ์ง ์ฉ๋์ ์ ์ฅ์๋ฅผ ์ ๊ณตํ๋ค.
์ฐ์ ๊ธฐ๋ณธ์ ์ผ๋ก Web Storage๋ ์ฟ ํค์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ฌ์ดํธ์ ๋๋ฉ์ธ ๋จ์๋ก ์ ๊ทผ์ด ์ ํ๋๋ค. ์๋ฅผ ๋ค์ด, A ๋๋ฉ์ธ์์ ์ ์ฅํ ๋ฐ์ดํฐ๋ B ๋๋ฉ์ธ์์ ์กฐํํ ์ ์๋ค๋ ๊ฒ์ด๋ค. ์ด๋ ๋ฐ์ดํฐ์ ๋ณด์ ์ธก๋ฉด์์ ๋น์ฐํ๋ค.
Local Storage
์ ์ฅํ ๋ฐ์ดํฐ๋ฅผ ๋ช ์์ ์ผ๋ก ์ง์ฐ์ง ์๋ ์ด์ ์๊ตฌ์ ์ผ๋ก ๋ณด๊ด์ด ๊ฐ๋ฅํ๋ค. ์์ ๋งํ๋๋ก ๋๋ฉ์ธ๋ง๋ค ๋ณ๋๋ก ๋ก์ปฌ ์คํ ๋ก์ง๊ฐ ์์ฑ๋๋ค. Windows ์ ์ญ ๊ฐ์ฒด์ Local Storage๋ผ๋ ์ปฌ๋ ์ ์ ํตํด ์ ์ฅ๊ณผ ์กฐํ๊ฐ ์ด๋ฃจ์ด์ง๋ค.
Session Storage
Session Storage๋ ๋ฐ์ดํฐ์ ์ง์์ฑ๊ณผ ์ก์ธ์ค ๋ฒ์์ ํน์ํ ์ ํ์ด ์กด์ฌํ๋ค. Session Storage๋ windows ์ ์ญ ๊ฐ์ฒด์ Session Storage๋ผ๋ ์ปฌ๋ ์ ์ ํตํด ์ ์ฅ๊ณผ ์กฐํ๊ฐ ์ด๋ฃจ์ด์ง๋ค.
๋ฐ์ดํฐ ์ ์ง ์ธก๋ฉด
Session Storage๋ ๋ฐ์ดํฐ๊ฐ ์ง์์ ์ผ๋ก ๋ณด๊ด๋์ง ์๋๋ค. ์ด๋ ๋ง์น ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฐ ์ธ์ ์ฟ ํค์ ๊ทธ ์ฑ์ง์ด ๋น์ทํ๋ฐ, ํ์ฌ ํ์ด์ง๊ฐ ๋ธ๋ผ์ฐ์ง๋๊ณ ์๋ ๋ธ๋ผ์ฐ์ ์ปจํ ์คํธ ๋ด์์๋ง ๋ฐ์ดํฐ๊ฐ ์ ์ง๋๋ค.
Local Storage๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ข ๋ฃํด๋ ๋ฐ์ดํฐ๋ ๋ณด๊ด๋์ด ๋ค์๋ฒ ์ ์์๋ ๊ทธ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ฐ๋ฉด, Session Storage๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ข ๋ฃ๋๋ฉด ๋ฐ์ดํฐ๋ ๊ฐ์ด ์ง์์ง๋ค. ์ฆ, ๋ธ๋ผ์ฐ์ ๊ฐ ์ข ๋ฃ๋๋ฉด Session Storage๋ ์ญ์ ๋๋ค๋ ๊ฒ์ด๋ค.
๋ฐ์ดํฐ ๋ฒ์ ์ธก๋ฉด
Session Storage ์ญ์ Web Storage์ ๊ธฐ๋ณธ ๋ณด์ ์ฒ๋ผ ๋๋ฉ์ธ๋ณ๋ก ๋ณ๋๋ก ์์ฑ๋๋ค. ์ฌ๊ธฐ ๋๋ถ์ด Session Storage๋ ๊ฐ์ ์ฌ์ดํธ์ ๊ฐ์ ๋๋ฉ์ธ์ด๋ผ ํ ์ง๋ผ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ค๋ฅด๋ฉด ์๋ก ๋ค๋ฅธ ์์ญ์ด ๋๋ค. ๋ธ๋ผ์ฐ์ ์ปจํ ์คํธ๊ฐ ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ด๋ค.
ํญ ๋ธ๋ผ์ฐ์ง์ด๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ํ๋ ๋ ์คํํด์ ๊ฐ์ ํ์ด์ง๋ฅผ ์คํํ์ ๋, ์ด ๋ ํ์ด์ง์ Session Storage๋ ๊ฐ๊ฐ ๋ณ๊ฐ์ ์์ญ์ผ๋ก ์๋ก ์นจ๋ฒํ์ง ๋ชปํ๋ค๋ ์๋ฏธ์ด๋ค. ์ด๋ ๋๋ฉ์ธ๋ง ๊ฐ์ผ๋ฉด ์ ์ญ์ ์ผ๋ก ๊ณต์ ๊ฐ๋ฅํ Local Storage์ ๊ตฌ๋ถ๋๋ ํน์ง์ด๋ค.
Web Storage์ ๋ณด์์ ์๋ก ๋ค๋ฅธ ๋๋ฉ์ธ์ ๋ฐ์ดํฐ ์นจ๋ฒ์ ๋ง๊ณ ๋ ์์ง๋ง ํด๋ผ์ด์ธํธ, ์ฆ ์ฌ์ฉ์๋ฅผ ๋ง๊ณ ์์ง๋ ์๋ค. ํด๋ผ์ด์ธํธ๋ ์ผ๋ง๋ ์ง ์ ์ฅ๋ ๊ฐ์ ์์๋ก ์์ ์ด ๊ฐ๋ฅํ๋ค. ์ด๊ฒ์ ์ฟ ํค์ ๋์ผํ ๊ฐ๋ ์ด๋ค. ๊ทธ๋ ๋ค๊ณ ์ฟ ํค์ ๋นํด ๋ณ๋ค๋ฅธ ๋ณด์ ์ทจ์ฝ์ ์ ๋ ๊ฐ์ง ๊ฒ์ ์๋๋ค. ๋ฐ๋ผ์ ๊ฐ๋ฐ์๋ ์ฌ์ฉ์์ ์ํ ์ด๋ฌํ ์์ ๋ณ๊ฒฝ์ ํญ์ ์์ ์ฃผ์ํ๊ณ ๋ฐฉ์ด ์ฝ๋์ ์์ฑ์ ์์ง ๋ง์์ผ ํ๋ค.
๋๊ธ๋จ๊ธฐ๊ธฐ