[Javascript] 로컬 스토리지 사용 방법

[Javascript] 로컬 스토리지 사용 방법

 

 

 

1. 로컬 스토리지란?

자바 스크립트 메서드나 변수를 사용할 때, 새로 고침을 해도 그 값을 계속 저장해놓고 사용하고 싶을 때가 있다.

예를 들면, 카카오맵을 웹에서 사용하면, 드래그를 하면서 지도를 이동시키는데, 한 번 이동했던 장소를 새로고침 하거나 다른 페이지를 갔다 와도 원래 보았던 위치를 계속 보고 싶을 때를 들 수 있겠다. 자바스크립트는 브라우저를 새로고침 할 때마다 계속 새롭게 불러와지고, 변수도 초기화될 수밖에 없다. 그렇기 때문에 어딘가에 변수를 저장하고 싶다면, 로컬 스토리지를 활용하면 된다.

 

나는 지금 현재 프로젝트에서 로컬 스토리지를 활용하여 경도, 위도 값을 로컬 스토리지에 저장하고, 창을 닫으면 그 값을 지우는 방법으로 브라우저에게 원래 있던 위치를 '기억'하게 만들었다.

 

이러한 로컬 스토리지를 어떻게 사용하는지 알아보고자 한다.

 

 

<요약>
setItem() - key, value 추가
getItem() - value 읽어 오기
removeItem() - item 삭제
clear() - 도메인 내의 localStorage 값 삭제
length - 전체 item 갯수
key() - index로 key값 찾기

 

 

 

2. 로컬 스토리지에 키-값 추가하기, 조회하기

 

 

setItem(key, value) : key-value 쌍의 데이터를 로컬스토리지에 저장한다.

getItem(key, value) : localStorage의 키의 값을 반환한다.

 

// setItem
window.localStorage.setItem('Lat', '37.51564324');
window.localStorage.setItem('Lng', '126.212121');

// getItem
const Lat = window.localStorage.getItem('Lat');
const Lng = window.localStorage.getItem('Lng');

// 결과 출력
document.write(Lat); // 37.51564324
document.write('<br/>');
document.write(Lng); // 126.212121

 

로컬 스토리지에는 문자열만 저장할 수 있다. 123.141244를 저장해도 문자열로 저장이 된다. 따라서 숫자로 활용하고 싶다면, 파싱을 해서 그 값을 활용하여야 한다.

 

 

3, localStorage에 객체, 배열 저장하기

 

// localStorage에 저장할 객체

const latLng = {
    lat : 38,
    lng : 123.1241
}

// localStorage에 저장할 배열

const arr = [1, 2, 3];


// 객체, 배열을 JSON 문자열로 변환

const LatLngString = JSON.stringify(LatLng);
const arrString = JSON.stringify(arr);


// setItem

window.localStorage.setItem('LatLng', LatLngString);
window.localStorage.setItem('nums', arrString);


// getItem

const LatLngString = window.localStorage.getItem('LatLng');
const numsString = window.localStorage.getItem('nums');


// JSON 문자열을 객체, 배열로 변환

const LatLngObj = JSON.parse(LatLngString);
const numsArr = JSON.parse(numsString);


// 결과 출력

document.write(LatLngString); // {lat:38, lng:123.1241}
document.write('<br/>');
document.write(LatLngObj); // [object Object]
document.write('<br/>');

document.write(numsString); // [1,2,3]
document.write('<br/>');
document.write(numsArr); // 1,2,3
document.write('<br/>');

 

객체의 저장, 조회는 '문자열화 ▶︎ set ▶︎ get ▶︎ json파싱 ▶︎ 출력'의 순서를 거친다.

 

const LatLngString = JSON.stringify(LatLng);

const arrString = JSON.stringify(arr);

 

JSON.stringify() 메서드를 거치며 문자열화 되고, 이것을 저장한 뒤, 다시 불러내어 parse 하여 나타내는 것이다.

 

 

4. localStorage에 값 삭제하기

 

removeItem(key) : 특정 key의 value를 삭제한다. 

 

// setItem
window.localStorage.setItem('Lat', '37.51564324');
window.localStorage.setItem('Lng', '126.212121');

// removeItem
window.localStorage.removeItem('Lat');
window.localStorage.removeItem('Hat');

// getItem
const Lat = window.localStorage.getItem('Lat');
const Lng = window.localStorage.getItem('Lng');

// 결과 출력
document.write(Lat); // null
document.write('<br/>');
document.write(Lng); // 126.212121

 

window.localStorage.removeItem('Lat');

 

키 Lat과 쌍인 value인 37.51564324가 삭제된다. 그런데 Hat은 로컬 스토리지에 없는 키이다. 존재하지 않는 키를 파라미터로 전달하면 아무 일도 일어나지 않는다.

 

 

 

5. localStorage에 값 전체 삭제하기

 

clear() : 로컬 스토리지 모든 키에 저장된 value를 삭제한다.

 

// setItem
window.localStorage.setItem('Lat', '37.51564324');
window.localStorage.setItem('Lng', '126.212121');

// clear
window.localStorage.clear();

// getItem
const Lat = window.localStorage.getItem('Lat');
const Lng = window.localStorage.getItem('Lng');

// 결과 출력
document.write(Lat); // null
document.write('<br/>');
document.write(Lng); // null

 

clear()의 경우, 현재 스토리지에 존재하는 key값과 쌍을 이루는 value가 모두 삭제된다. null이 출력되는 것을 볼 수 있다.

 

 

6. 로컬 스토리지의 키의 개수 구하기

length : 로컬 스토리지에 있는 키의 개수를 구한다.

 

// 초기화
window.localStorage.clear();

// setItem
window.localStorage.setItem('Lat', '37.51564324');
window.localStorage.setItem('Lng', '126.212121');

// localStorage item 갯수
const length = window.localStorage.length

// 결과 출력
document.write(length); // 2

 

const length = window.localStorage.length;

localStorage에 저장된 키의 개수를 확인할 수 있다.

 

 

 

 

7. localStorage의 key의 인덱스 찾기

 

key(index) : n번 인덱스의 키값을 반환한다.

 

// setItem
window.localStorage.setItem('Lat', '37.51564324');
window.localStorage.setItem('Lng', '126.212121');

// key
const key_1 = window.localStorage.key(0);
const key_2 = window.localStorage.key(1);

// 결과 출력
document.write(key_1); // Lat
document.write('<br/>');
document.write(key_2); // Lng