웹 스토리지는 클라이언트에서 서버로 데이터를 전송하여 실제 데이터베이스에 저장하는 것이 아닌 웹 브라우저의 저장공간에 데이터를 저장하게 됩니다.
(저장 공간 : 5mb)
웹 스토리지는 보안상 중요한 정보인 로그인 비밀번호 등엔 사용되지 않으며 비교적 덜 중요한 정보인 장바구니 목록이나 테마 정보 등에 사용됩니다.
웹 스토리지엔 localStorage와 sessionStorage가 있습니다.
각 스토리지는 키와 값으로 저장되며 사용법은 동일하지만 삭제 시점의 차이가 존재합니다.
웹 브라우저 저장소인 localStorage와 sessionStorage에 대해 알아보고자 합니다.
- 목차 -
가. localStorage & sessionStorage
1. localStorage
2. sessionStorage
나. 사용법
1. 기본 사용법
2. 배열 저장법
다. 참고자료
가. localStorage & sessionStorage
1. localStorage
- 브라우저를 닫거나 종료하여도 별도로 삭제하기 전까지는 데이터가 남아있습니다.
- 로컬스토리지는 현재 사용하는 기기(PC, 스마트폰)에 저장하며 도메인별로 따로 저장됩니다.
(pc에서 로컬스토리지를 저장했다면 스마트폰에서는 해당 데이터를 확인할 수 없습니다)
(www.naver.com에 저장한 데이터는 www.daum.net에서 확인할 수 없습니다. 하지만 도메인이 같을 경우 새 창을 띄워도 동일한 데이터를 확인할 수 있습니다)
2. sessionStorage
- 브라우저를 닫거나 종료하면 데이터가 삭제됩니다.
- 세션스토리지는 탭별로 별도의 데이터를 저장하게 됩니다.
(같은 브라우저 탭 안에서만 데이터가 유지됩니다)
* localStorage & sessionStorage 차이점
- 아래 코드를 실행하여 로컬스토리지와 세션스토리지에 데이터를 각 하나씩 저장합니다.
// storage.html 파일
localStorage.setItem("local", "local_value")
sessionStorage.setItem("session", "session_value")- 다른 html 파일을 생성하여 위의 데이터를 console에 출력합니다.
// storage02.html 파일
console.log(localStorage.getItem("local")) // local_value 출력
console.log(sessionStorage.getItem("session")) // session_value 출력
위 이미지처럼 실제로 콘솔창에는 2개의 값이 출력됩니다.
- 새 탭을 열어 위와 동일한 주소로 접속합니다.
- 그 결과 다른 탭에서 sessionStorage 값은 null(값 없음)이 출력되고 localStorage 값만 출력되고 있습니다.
- 브라우저를 완전히 종료하고 다시 실행해도 위와 같은 결과가 도출됩니다.
나. 사용법
1. 기본사용법
1. 먼저 localStorage와 sessionStorage는 html5부터 지원하기 때문에 아래 코드를 통해 지원여부를 확인할 수 있습니다.
if (typeof (Storage) !== "undefined") { // 스토리지 지원 여부 확인
// typeof(Storage)가 undefined가 아니면 웹 스토리지를 지원합니다.
} else {
// 웹 스토리지를 지원하지 않습니다.
}
2. localStorage(sessionStorage)에 데이터 추가하기
* localStorage와 sessionStorage는 사용법이 동일하기 때문에 코드 예제엔 localStorage가 사용되지만 sessionStorage를 사용시 이름만 바꿔서 사용하시면 됩니다.
// 첫 번째 파라미터 사용할 키 명, 두 번째 파라미터 값
localStorage.setItem("key", "value");localStorage객체의 내장함수인 setItem()을 사용하여
첫 번째 파라미터로 키 명을 작성하고
두 번째 파라미터로 값을 작성합니다.
3. localStorage(sessionStorage)에 데이터 가져오기
console.log(localStorage.getItem("key")) // value가 콘솔에 출력됩니다.localStorage객체의 내장함수인 getItem("키 명")을 사용합니다.
파라미터로 setItem()으로 추가한 데이터의 키 명을 입력합니다.
* setItem()으로 추가한 데이터를 console.log()로 확인하지 않아도 브라우저에서 확인이 가능한 방법
- 로컬스토리지를 저장한 브라우저를 실행합니다. (vscode의 라이브서버 확장기능에서도 확인할 수 있습니다)
- 키보드 상단에 F12키를 누르시거나 마우스 오른쪽 클릭 후 검사 항목을 클릭합니다.
- 검사를 클릭하면 개발자도구창이 실행됩니다.
개발자 도구창을 가로로 늘리시고 상단에 응용 프로그램을 클릭합니다.
그리고 좌측에 로컬 저장소와 세션저장소를 확인할 수 있습니다.
- 로컬 저장소 좌측에 ▶ 을 클릭하면 아래 저장된 주소가 나오고 주소를 클릭하면
아래 이미지와 같이 setItem("key, "value")으로 저장한 데이터를 확인할 수 있습니다.
4. localStorage(sessionStorage)에 데이터 삭제하기
// 키가 key인 데이터를 삭제합니다.
localStorage.removeItem("key");localStorage객체의 내장함수인 removeItem("키 명")을 사용합니다.
파라미터로 setItem()으로 추가한 데이터의 키 명을 입력합니다.
실제로 실행한 결과 아래 이미지와 같이 추가한 key 데이터가 삭제된 모습을 볼 수 있습니다.
5. localStorage(sessionStorage)에 모든 데이터 삭제하기
// 로컬 스토리지 내의 모든 데이터를 삭제합니다.
localStorage.clear()localStorage객체의 내장함수인 clear()를 사용합니다.
실제로 삭제되는지 확인하기 위해 아래 별도의 데이터를 추가하였습니다.
그리고 clear() 실행 시 아래와 같이 모든 데이터가 한 번에 삭제되었습니다.
2. 배열 저장법
로컬스토리지와 세션스토리지는 키 값으로 문자열만 저장되기 때문에 바로 배열을 넣게되면 배열이 아닌 문자열로 저장됩니다.
// 두 번째 파리미터로 배열을 추가했으나 문자열로만 추가됩니다.
localStorage.setItem('key', ["apple", "banana", "pear"])
두 번째 파라미터를 배열로 지정했으나 값에는 위 이미지와 같이 배열이 아닌 문자열로 추가됩니다.
* JSON.stringify() & JSON.parse() 이용하기
let arr = ["apple", "banana", "pear"]
localStorage.setItem('key', JSON.stringify(arr)) // ["apple", "banana", "pear"]로 추가
setItem() 내장함수의 두 번째 파라미터로 JSON.stringify()를 이용해 문자열로 변환 후 전달 시 배열 형태로 저장됩니다.
하지만 getItem()으로 가져올 때 그냥 가져오게 되면 배열이 아닌 문자열 형태로 출력됩니다.
따라서 가져올 때 JSON.parse()를 이용해 가져오게 되면 배열로 사용할 수 있게 됩니다.
console.log(JSON.parse(localStorage.getItem("key"))) // 배열 형태로 출력
위 코드를 실행 시 콘솔 창에 배열로 출력된 모습을 확인할 수 있습니다.
웹 브라우저 저장소인 localStorage와 sessionStorage를 알아보았습니다.
둘의 가장 큰 차이점은 삭제 시점에 있었는데요,
localStorage는 삭제하기 전까지 웹 브라우저를 종료하여도 데이터가 남아있으며 동일한 도메인 내에서는 데이터를 공유할 수 있음을 알 수 있었습니다.
하지만 sessionStorage는 동일한 도메인에서도 새 탭에선 데이터를 공유할 수 없으며 브라우저를 종료하면 데이터가 삭제됨을 알 수 있었습니다.
둘의 차이점을 확인하여 적절한 상황에 웹 브라우저 저장소를 사용하는 것이 중요하다고 생각되어 집니다.
여기까지 저의 글을 읽어주셔서 감사합니다.
3. 참고자료
1. https://www.youtube.com/watch?v=nmLwQyWzkXU - 개발자의 품격, 자바스크립트 기초-localStorage와 sessionStorage 이해하기
2. http://www.tcpschool.com/html/html5_api_webStorage - Web Storage
'언어 > JAVASCRIPT' 카테고리의 다른 글
| [javaScript] 프론트엔드 가상서버 json-server 사용법 (0) | 2022.10.15 |
|---|---|
| [javaScript] Array(배열) 객체 내장 함수의 종류와 사용법 (2) | 2022.10.06 |
| [javaScript] 반복문에 대해서 (0) | 2022.10.01 |