Web API LocalStorage 활용해서 데이터 저장하기

로컬 스토리지

 

Web API인 LocalStorage를 활용해서 브라우저 상에 데이터를 저장하고 저장한 데이터를 활용하는 방법을 공부하기 위해 내용을 정리하고 복습하려 한다.

 

LocalStorage

---

LocalStorage는 브라우저 내에 데이터를 키-값의 형태로 저장할 수 있도록 해준다. LocalStorage를 사용하면 웹 페이지를 끄고 다시 브라우저를 실행해도 데이터가 지워지지 않고 그대로 유지된다. 또한 브라우저를 여러 탭 혹은 여러 창을 띄워놔도 서로 데이터가 공유된다. 다만 이러한 데이터가 공유되고 유지되는 것은 같은 브라우저를 사용하는 경우에 해당한다. 

 

데이터 저장하기

localStorage.setItem(키, 값)

localStorage.setItem('movie', '해리포터')
localStorage.setItem('number', 9)

 

위와 같이 .setItem( )을 통해 로컬 스토리지에 데이터를 저장한다. 데이터를 저장할 때 주의해야 할 점은 키와 값은 반드시 문자열이라는 것이다. 첫 번째 등록한 데이터 해리 포터는 문자열로 되어있지만 두 번째 등록한 데이터 9는 숫자형이다 이렇게 저장하면 자동으로 문자열로 변환되어 저장된다.

 

로컬 스토리지에 저장한 결과

 

그래서 객체나 배열의 형태를 데이터를 저장해도 문자열로 변환되어 저장된다. 특히나 객체나 배열을 그대로 저장하게 되면 저장된 데이터를 사용하려고 가져왔을 때는 아래와 같은 문자열로 변환된 내용이 출력된다.

 

객체나 배열을 저장해서 사용한 결과

 

 

데이터 가져오기

로컬 스토리지에 저장한 데이터를 가져올 때는 위의 사진들처럼 .getItem( )을 사용해 가져올 수 있다. 가져올 데이터의 키값을 넣어주면 저장된 데이터를 가져올 수 있다. 

 

객체나 배열 저장하기

객체나 배열을 저장하고 저장한 데이터를 가져왔을 때 문자열의 형태로 출력되는 문제가 생긴다는 것을 확인했다. 그렇다면 어떻게 저장하고 어떻게 가져와야 할까? 바로 JSON의 형태로 데이터를 사용하는 것이다. 데이터를 저장할 때는 JSON 형태로 직렬화 데이터를 가져와야 할 때는 역직렬화를 통해 원본 데이터를 그대로 사용할 수 있다.

 

localStorage.setItem('obj', JSON.stringify([{name: 'minhoo', age: 30}, {name: 'ena', age: 1}]))
localStorage.getItem('obj') // '[{"name":"minhoo","age":30},{"name":"ena","age":1}]'

const obj = JSON.parse(localStorage.getItem('obj'))

 

JSON.stringify( )를 통해 배열이나 객체의 데이터를 저장하고 JSON.parse( )를 통해 사용할 데이터를 원본 형태로 변환 해 줄 수 있다.

 

JSON.parse( )를 사용한 결과

 

 

데이터 삭제하기

로컬 스토리지에 저장된 데이터를 삭제하는 방법 또한 간단하게 처리가 가능하다. 키값을 통해 하나하나 삭제하는 방법과 clear( ) 메서드를 통해 전체를 모두 삭제하는 방법이 있다.

localStorage.removeItem(키) // 키에 저장된 데이터만 삭제
localStorage.clear() // 전체 삭제

 

로컬 스토리지에 저장 가능한 용량은 일반적으로 5MB 이상인데 이는 브라우저별로 다를 수 있다. 로컬 스토리지 데이터는 영구적으로 유지되기 때문에 사용하면서 데이터의 유효기간을 설정해 주어야 한다. 유효기간이 만료되면 자동으로 삭제될 수 있도록 해야 한다. 다만 이런 만료 일자를 설정할 때는 UTC 시간을 기준으로 해야 한다.

 

// 로컬 스토리지에 데이터 저장 함수
function setItemWithExpiry(key, value, expiryInMinutes) {
    const now = new Date();
    const expiryTime = now.getTime() + expiryInMinutes * 60 * 1000; // 만료 시간 계산 (밀리초 단위)

    const item = {
        value: value,
        expiry: expiryTime, // 만료 시간을 저장
    };

    localStorage.setItem(key, JSON.stringify(item)); // JSON 문자열로 변환하여 저장
}

// 로컬 스토리지에서 데이터 읽기 함수
function getItemWithExpiry(key) {
    const itemStr = localStorage.getItem(key);

    // 데이터가 존재하지 않을 경우 null 반환
    if (!itemStr) {
        return null;
    }

    const item = JSON.parse(itemStr); // JSON 문자열을 객체로 변환
    const now = new Date();

    // 현재 시간이 만료 시간보다 크면 데이터 삭제
    if (now.getTime() > item.expiry) {
        localStorage.removeItem(key); // 데이터 삭제
        return null; // null 반환
    }

    return item.value; // 만료되지 않은 경우 값 반환
}

// 사용 예시
setItemWithExpiry('myData', 'Hello, World!', 5); // 5분 후 만료되는 데이터 저장

const value = getItemWithExpiry('myData'); // 데이터 읽기
console.log(value); // 만료되지 않았다면 값 출력, 만료되었다면 null 출력

 

즉 데이터와 데이터가 유효한 시간을 함께 저장하고 그 시간을 넘었다면 삭제하고 아니면 그 값을 계속 놔두는 방식으로 유효시간을 설정하는 방법이 대부분이다.