localStorage에 5분동안 caching캐싱 처리히기

👉🏻 환경: vue2 + axios
👉🏻 API : jsonplaceholder[참고링크]

간단한 TEST를 위해서 jsonplaceholder API를 사용하겠습니다.
다음과 같은 컴포넌트가 있고 /posts에 get 요청을 하고 있습니다.

// src/components/home.vue
<template>
  <div class="home">
    <div v-for="item in postsDatas" :key="item.id">
      {{ item.title }}
    </div>
  </div>
</template>

<script>
import http from '@/api/index';
// apis호출 메소드 모음.
const apis = {
  posts: () => http.get('/posts'), // jsonplaceholder posts 데이터
}

export default {
  name: 'home-b15d62',
  data(){
    return {
      postsDatas: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const postsData = await apis.posts();
      this.postsDatas = postsData.data.map(group => this.dataCustom(group))
      console.log(this.postsDatas)
    },
    dataCustom(group){ //데이터 가공만 담당하는 함수.
      group = { //원하는 데이터만 따로 정리할수 있슴.
        id: group.id,
        title: group.title,
      }
      group['group2'] = {} //새로운 객체의 프로퍼티를 만들어서 추가할수 있습니다.
      group['group2'].content = group.id
      return group;
    }
  }
}
</script>

👉🏻로컬스토리지에 5분동안 캐싱하기

이렇게 API 호출해서 받아온 데이터를 로컬스토리지에 저장하고 5분동안 캐싱해보도록 하겠습니다.

<template>
  <div class="home">
    <div v-for="item in postsDatas" :key="item.id">
      {{ item.title }}
    </div>
  </div>
</template>

<script>
import http from '@/api/index';
import { setItemExpireTime, getItemExpireTime } from '../lib/storageCaching';
// apis호출 메소드 모음.
const apis = {
  posts: () => http.get('/posts'), // jsonplaceholder posts 데이터
}
const MINUTES = (1000 * 300); //5분 설정

export default {
  name: 'home-b15d62',
  data(){
    return {
      postsDatas: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const objString = window.localStorage.getItem('posts');
      const obj = JSON.parse(objString);
      if(obj === null){ //최초로딩때 로컬스토리지가 null때만
        const postsData = await apis.posts();
        const postsDatas = postsData.data.map(group => this.dataCustom(group))
        setItemExpireTime('posts', postsDatas, MINUTES) //5분동안 posts 데이터를 'posts'이름으로 로컬스토리지에 저장
      }
      this.postsDatas = await getItemExpireTime('posts');
    },
    dataCustom(group){ //데이터 가공만 담당하는 함수.
      group = { //원하는 데이터만 따로 정리할수 있슴.
        id: group.id,
        title: group.title,
      }
      group['group2'] = {} //새로운 객체의 프로퍼티를 만들어서 추가할수 있습니다.
      group['group2'].content = group.id
      return group;
    }
  }
}
</script>

로컬스토리지에 caching하기위해서 정의한 함수들

// src/lib/storageCaching.js

import http from '@/api/index';

// apis호출 메소드 모음.
const apis = {
  posts: () => http.get('/posts'), // jsonplaceholder posts 데이터
}
const MINUTES = (1000 * 300); //5분 설정

function dataCustom(group){ //데이터 가공만 담당하는 함수.
  group = { //원하는 데이터만 따로 정리할수 있슴.
    id: group.id,
    title: group.title,
  }
  group['group2'] = {} //새로운 객체의 프로퍼티를 만들어서 추가할수 있습니다.
  group['group2'].content = group.id
  return group;
}

// 만료 시간과 함께 데이터를 저장
function setItemExpireTime (keyName, keyValue, tts) {
  const obj = {
    expire : Date.now() + tts,
    data : keyValue,
  }
  const objString = JSON.stringify(obj);
  window.localStorage.setItem(keyName, objString);
}
  
// 만료 시간을 체크하며 데이터 읽기
async function getItemExpireTime(keyName) {
  const objString = window.localStorage.getItem(keyName);
  if(!objString) null;

  const obj = JSON.parse(objString);
  // 현재 시간과 localStorage의 expire 시간 비교
  if(Date.now() > obj.expire) { // 만료시간이 지남.
    // posts 포스트 데이터
    const postsData = await apis.posts();
    const postsDatas = postsData.data.map(group => dataCustom(group))
    setItemExpireTime('posts', postsDatas, MINUTES)
    // posts 포스트 데이터/
  }
  return obj.data;
}

export {setItemExpireTime, getItemExpireTime}

캐싱된 시간이 만료되었을때 다시 API 호출하고, 받아온 데이터를 다시 5분동안 데이터를 'posts'이름으로 로컬스토리지에 저장 합니다.

👉🏻파일공유

파일공유합니다.
다운로드 받으셔서 전체 코드를 한번 보세요~~

storagecaching.zip

0.11MB