[HTTP] HTTPS , Cache, Cookie, Proxy
위 포스팅 내용 중 쿠키에 대한 개념을 정리하면서
간단하게 web storage에 대해서도 언급을 했는데,
ToDoList만드는 과정에서 localStorage에 데이터를 저장하는 법을 직접 실습하게 되었다.
다시 한번, localStorage에 대해 확고히 익히기 위해 개념정리를 해봐야겠다.
먼저 localStorage는 Web Storage API 중 하나인데,
Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다
훨씬 직관적으로 저장할 수 있는 방법을 제공한다고 MDN문서에 나온다.
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
쿠키와 비교했을 때, 장점
localStorage.setItem(keyname, keyValue);
localStorage는 저장할 때, key값과 그에 해당하는 데이터값을 저장한다.
keyName
A DOMString containing the name of the key you want to create/update.
keyValue
A DOMString containing the value you want to give the key you are creating/updating.
참고 setitem() 관련 MDN
내가 실습했던 JS 및 React예제에서는 보통 배열 형태였기때문에,
keyvalue부분에 JSON.stringify()를 활용해, string화 시켜서 활용했다.
JSON.stringify() 관련 MDN
localStorage.getItem(keyname);
localStorage.removeItem(keyname);
localStorage.clear();
내가 실습했던 예제에서는 타켓으로 하는 데이터만 배열에서 filtering해서 제거 후
제거한 새로운 배열을 setItem방식으로 update해서 구현했다.
참고 LocalStorage MDN
Window.localStorage