이번 프로젝트에서 처음으로 사용해본 로컬스토리지 🤔 네트워크 강의 때 공부 했었는데 막상 개발자분이 세션 스토리지와의 차이점을 여쭤봤는데 대답을 하지 못했음.. 반성하고 다시 공부해보자!
`localStorage`
웹 애플리케이션에서 클라이언트 측에서 데이터를 저장하고 관리하는 데 사용하는 기능 중 하나. 사이트 및 앱이 만료날짜 없이 웹 브라우저에 키-값 쌍을 저장할 수 있도록 하는 속성(Property)이다. 사용자가 브라우저를 닫거나 컴퓨터를 다시 시작한 후에도 저장된 데이터는 유지된다.
localStorage는 window 객체의 속성 중 하나로 브라우저 창과 상호작용하고 제어할 수 있는 전역 객체(Global object)로서 사용된다. 또한 window 속성과 메서드와 함께 사용할 수 있다.
`Window.localStorage`
`Window.localStorage`는 JavaScript에서 사용되는 속성(Property)으로, 로컬 스토리지 매커니즘을 제공한다. 이 속성은 Window 인터페이스의 일부로, DOM 문서를 포함하는 창을 나타낸다. Window 인터페이스는 다양한 함수, 생성자, 객체 및 네임스페이스를 포함하고 있다. Window.localStorage는 읽기 전용 속성으로 데이터를 저장하는 로컬 스토리지 객체에 대한 참조를 반환하며, 이 데이터는 원본에서만 접근할 수 있다.
쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기에 서버로 전송되지만, 두 스토리지의 경우 서버로 자동 전송되지 않는다.
특징
문자열, boolean, 숫자, null, undefined 등을 저장할 수 있지만 모두 문자열로 반환된다. 키도 문자열로 변환된다.
객체는 저장이 되지 않고 toString 메소드가 호출된 형태로 저장된다.
이를 위해 JSON.stringify와 JSON.parse를 이용하여 객체 통째로 저장하는 방법이 있다.
// 저장할 객체
const user = {
name: 'Nami',
email: 'nami@example.com',
age: 100,
};
// 객체를 JSON 문자열로 변환
const userJSON = JSON.stringify(user);
// 로컬 스토리지에 저장
localStorage.setItem('user', userJSON);
// 로컬 스토리지에서 데이터 가져오기
const storedUserJSON = localStorage.getItem('user');
// JSON 문자열을 객체로 파싱
const storedUser = JSON.parse(storedUserJSON);
// 저장된 객체 사용
console.log(storedUser.name); // Nami
console.log(storedUser.email); // nami@example.com
console.log(storedUser.age); // 100
✔️ 시크릿 브라우징 세션에서 로드된 데이터는 마지막 비공개 탭이 닫히면 삭제됨.
✔️ 오프라인에서도 데이터에 엑세스 할 수 있다. 인터넷 연결 없이도 사용할 수 있다.
✔️ 쿠키는 최대 4KB, 로컬 스토리지는 최대 5~ 10MB의 데이터를 저장할 수 있음.
✔️ 동기적이라 호출된 각 작업이 차례대로 실행된다. 처리하는 데이터에 따라 문제가 생길 수 있음.
✔️ 문자열만 저장되어 변환 작업이 필요하다. 이 또한 데이터 양에 따라 문제가 될 수 있음.
Window.sessionStorage
✔️ localStorage와 모든 메서드가 같다. 단지 데이터의 영구성이 없을 뿐이다.
✔️ 단일 세션에 대한 데이터만 저장한다.
✔️ 특정 탭에서만 유효하기 때문에 탭 또는 브라우저가 열린 동안만 지속된다.
✔️ 동일한 URL로 여러 탭/창을 열면 각 탭/창에 대한 세션 저장소가 생성됨.
✔️ 탭을 복제하면 탭의 세션스토리지가 새 탭에 복사된다.
✔️ 탭/창을 닫으면 세션이 종료되고 세션스토리지의 객체가 지워짐!
임시로 데이터 저장을 할 수 있어 일회성 데이터에 적합하다. 또한 사용자의 로그인 상태나 장바구니 내용 및 임시 작업 데이터를 관리할 때 사용된다. 그리고 닫을 때 삭제 되므로 보안 측면으로는 로컬 스토리지보다 좋다고 할 수 있다.
🤔 보안성을 강화하기 위해 어떤 방법이 있을지 추후에 알아봐야겠다.
[Window: localStorage property]
[Window: sessionStorage property]
'JavaScript' 카테고리의 다른 글
| Date() 생성자와 내장 메서드로 시계 깔끔하게 적용하기 (0) | 2023.08.29 |
|---|---|
| Submit시 Event.preventDefault()로 새로고침 Reload 방지하기 (2) | 2023.08.29 |
| 상수를 대문자로 쓰는 이유? 뿌리를 알아보자! (0) | 2023.08.28 |
| 자료구조, 배열 Arrays, 내장 메서드로 재배열 하기 (0) | 2023.08.19 |
| 반복문 없이 Array.prototype.filter()로 쉽게 재배열 하기 (0) | 2023.08.15 |