localStorage 개념정리

jungmin kim·2021년 12월 14일
0

HTTP

목록 보기
5/5
post-thumbnail

[HTTP] HTTPS , Cache, Cookie, Proxy
위 포스팅 내용 중 쿠키에 대한 개념을 정리하면서
간단하게 web storage에 대해서도 언급을 했는데,
ToDoList만드는 과정에서 localStorage에 데이터를 저장하는 법을 직접 실습하게 되었다.

다시 한번, 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 브라우저 확인

  1. 개발자모드 F12를 누르고 Application탭을 누른다.
  2. 왼쪽 사이드를 보면 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

0개의 댓글