FrontEnd/Javascript

WebStorage

berryberries 2023. 3. 14. 17:49



=> 웹 브라우저상에 데이터를 저장할 수있음
=> 하지만 서버에는 저장 안됨
=> key value쌍 형태로 데이터 저장
=> 최대 5MB 저장
=> webstorage 저장시 문자열 형태로 저장

-> 쿠키 기능과 비슷

cookie

=> 웹브라우저상에 데이터 저장
=> 4KB 데이터 저장제한
=> HTTP Request에 암호화 x : 보안 취약
=> HTTP Requestdp 포함되어있어 웹서비스 성능에 영향을줌

---------------------------

종류 = > 2가지

1. local storage

영구보관 = > 브라우저 창 꺼도, 새로고침해도 ㅇㅋ
동일한 컴퓨터, 동일한 브라우저에만 공유

ex) 자동 로그인 저장

2. session storage
영구보관 X => 창끄면 끝
동일 컴, 동일 브라우저여도 각각 sessionStorage다름

ex) 입력 폼 정보 저장 , 비로그인 장바구니

------------------------------


사용방법

<데이터 저장>

window.localStorage.colorSetting = '#a4509b';
window.localStorage['colorSetting'] = '#a4509b';
window.localStorage.setItem('colorSetting', '#a4509b');

<데이터 가져오기>

var color = window.localStorage.colorSetting;
var color = window.localStorage['colorSetting'];
var color = window.localStorage.getItem('colorSetting');

<데이터 삭제>

//특정 데이터만 삭제
window.localStorage.removeItem('colorSetting');

//전체 삭제
window.localStorage.clear();


--------------------------

시크릿모드 => 사파리 : 데이터 할당 0 ->데이터못씀