localStorage 개념정리
[HTTP] HTTPS , Cache, Cookie, Proxy
위 포스팅 내용 중 쿠키에 대한 개념을 정리하면서
간단하게 web storage에 대해서도 언급을 했는데,
ToDoList만드는 과정에서 localStorage에 데이터를 저장하는 법을 직접 실습하게 되었다.
- 관련 React project: https://github.com/naturalMin/to-do-list
- 관련 JS project: https://github.com/naturalMin/jm_study/blob/main/vanila_js/script/todolist.js
다시 한번, localStorage에 대해 확고히 익히기 위해 개념정리를 해봐야겠다.
localStorage 정의
먼저 localStorage는 Web Storage API 중 하나인데,
Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다
훨씬 직관적으로 저장할 수 있는 방법을 제공한다고 MDN문서에 나온다.
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
쿠키와 비교했을 때, 장점
- 저장공간이 크다.(최대 5MB)
- 유효기간 없이 데이터를 저장한다.
- JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다.
localStorage 브라우저 확인
- 개발자모드 F12를 누르고 Application탭을 누른다.
- 왼쪽 사이드를 보면 Storage 항목 - Local Storage가 나온다.
하위항목 해당하는 http프로토콜을 누르면, 해당 사이트에 저장된 데이터가 보여진다.
나같은 경우, 구글 모멘툼에서 확인해본 것이다.
localStorage 예시
add data
localStorage.setItem(keyname, keyValue);
localStorage는 저장할 때, key값과 그에 해당하는 데이터값을 저장한다.
Parameters
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
read data
localStorage.getItem(keyname);
delete data
localStorage.removeItem(keyname);
delete all data
localStorage.clear();
내가 실습했던 예제에서는 타켓으로 하는 데이터만 배열에서 filtering해서 제거 후
제거한 새로운 배열을 setItem방식으로 update해서 구현했다.
참고 LocalStorage MDN
Window.localStorage
Author And Source
이 문제에 관하여(localStorage 개념정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@natural_min/localStorage저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)