닷넷에서 데이터를 캐시하기위해서는
1. System.Web 의 Cache 를 이용하거나,
2. System.Runtime 의 ObjectCache 를 이용하여, 캐시 데이터를 저장할 수 있다.
Cache 를 생성할때는, 만료시간(Expiration Time)과 만료방식을 2가지로 설정해줄 수 있다.
1. Absolute Expiration
2. Sliding Expiration
Absolute Expiration 은 지정된 시간이 되면, 무조건 캐시 데이터가 만료되고,
Sliding Expiration 은 지정된 시간이 되면, 무조건 만료되는것은 동일하지만, 캐시 데이터를 읽기(Get)를 하게 되면, 만료시간이 다시 늘어나는 방식이다. (로그인 세션을 생각하면 이해가 쉬울것이다.)
클라이언트(웹브라우저)에 데이터를 캐시하기 위해서 쿠키(Cookie) 를 사용할 수도 있지만, 이는 굉장히 비효율적이다.
서버로 Request 를 할때마다 불필요한 트래픽이 발생하며, 저장용량도 4K 정도로 매우 작다.
그래서, 브라우저 내에서 필요한 캐시를 하기 위해, LocalStorage 또는 SessionStorage 를 사용할 것이다.
LocalStorage 은 디스크내에 저장이 되며, 브라우저에 따라 5M ~ 10M 정도의 저장공간을 제공하고, 브라우저가 종료되도 데이터는 유지가 된다.
SessionStorage 는 메모리 내에 존재하며, 브라우저 세션이 종료 (브라우저가 종료) 되면, 데이터도 삭제된다.
LocalStorage / SessionStorage 는 별도의 Expiration Time 기능을 제공하지 않고,
getItem / setItem / removeItem 등의 함수만 제공이 된다.
이를 활용하여, Expiration Time 과 Expiration 방법도 함께 적용해 볼것이다.
// ----------------------------------------------------------------------------------------------------- // Cache Base Object // Author : bemeal2@naver.com // do not remove any comments // ----------------------------------------------------------------------------------------------------- window.cache = { get: function (key, isSlidingExpiration, expirationHour) { let jsonString = window.sessionStorage && window.sessionStorage.getItem && window.sessionStorage.getItem(key);
if (jsonString) { let cacheData = JSON.parse(jsonString); let expirationDate = new Date(cacheData.expirationDate); if (expirationDate > new Date()) { // 만료시간 체크 : 지났으면 삭제
let cacheDataObject = JSON.parse(cacheData.value);
if(isSlidingExpiration) // Sliding Expiration 이라면 { this.set(key, cacheDataObject, expirationHour); // 만료시간을 연장하기 위해, Cache Data 를 재설정한다. }
return cacheDataObject; } else { this.remove(key); } } return null; }, set: function(key, value, expirationHour) { let expirationDate = new Date(new Date().getTime() + (60 * 60000 * expirationHour)) let cacheData = { value: JSON.stringify(value), expirationDate: expirationDate.toISOString() } window.sessionStorage && window.sessionStorage.setItem && window.sessionStorage.setItem(key, JSON.stringify(cacheData)) }, remove: function (key) { window.sessionStorage && window.sessionStorage.removeItem && window.sessionStorage.removeItem(key); } }; |
우선 Base 객체를 하나 생성한다.
이름은 window.cache 이며, get / set / remove 3개의 함수만으로 이루어져 있다.
window.sessionStorage 를 사용하고 있지만, localStorage 를 사용하고자 한다면,
window.sessionStorage => window.localStorage 로 바꾸기만 하면 된다.
원리는 간단하다.
1. 저장할때는 sessionStorage 에 JSON 객체를 stringify 로 문자열 형태로 바꿔서 저장하고,
읽어올때는 JSON.parse 로 해서, 다시 객체 형태로 읽어온다.
2. 이때, 만료시간을 지정하기 위해, cacheData 라는 json 객체로 감싸서, value / expirationDate 로 저장하고 있다.
3. 또한, 가져오기(get) 할때, sliding 캐쉬일경우에는 만료시간을 늘려주기 위해 다시 set 함수를 호출하고 있다.
이 window.cache 객체 그대로도 사용할 수 있지만, 매번 함수안에 파라미터를 넣어줘야 한다. 이를 상속하여, 단순화 시켜 보자.
// ----------------------------------------------------------------------------------------------------- // Object Cache Data // Author : bemeal2@naver.com // do not remove any comments // ----------------------------------------------------------------------------------------------------- window.cache.data = Object.create(window.cache, { cacheData: { value: "data", enumerable: false, writable: false }, isSlidingExpiration: { value: false, enumerable: false, writable: true }, // default : Absolute Expiration expirationHour: { value: 1, enumerable: false, writable: true } // default expiration : 1 hour }); window.cache.data.setObject = function (data) { let self = this; self.set(self.cacheData, data, self.expirationHour); // expiration hour : default 1 hour } window.cache.data.getObject = function () { let self = this; let data = self.get(self.cacheData, self.isSlidingExpiration, self.expirationHour); return data; } window.cache.data.removeObject = function () { let self = this; self.remove(self.cacheData); } |
setObject / getObject / removeObject 3개의 함수를 가지는 window.cache.data 객체를 만들었다.
옵션으로 cacheData , isSlidingExpiration , expirationHour 값을 가지고 있다.
실제 저장할 데이터에 따라 이 3가지 값을 변경하면서 저장하면된다.
마지막으로, 이 객체를 상속하여, 실제 사용하는 객체를 생성할 것이다.
// Sliding Expiration 캐시 예제 window.cache.data.locale_data = Object.create(window.cache.data, { cacheData: { value: "locale_data", enumerable: false, writable: false }, isSlidingExpiration: { value: true, enumerable: false, writable: true }, // sliding expiration expirationHour: { value: 1, enumerable: false, writable: true } // expiration timeout : 1 hour }); // Absolute Expiration 캐시 예제 window.cache.data.server_config = Object.create(window.cache.data, { cacheData: { value: "server_config", enumerable: false, writable: false }, isSlidingExpiration: { value: false, enumerable: false, writable: true }, // absolute expiration expirationHour: { value: 0.5, enumerable: false, writable: true } // expiration timeout : 30 minute }); |
위에서는 window.cache.data.locale_data 와 window.cache.data.server_config 를 생성했지만,
위의 cacheData string 값을 변경하여, 무한하게 생성해서 사용하면 된다.
사용예1)
window.cache.data.locale_data.setObject( master_data.masterData );
window.cache.data.locale_data.getObject();
사용예2)
window.cache.data.server_config.setObject( master_data.server_config_list_array );
window.cache.data.server_config.getObject();
실제로, locale_data 는 getObject() 를 할때마다, expiratioDate 값이 변하는것을 확인할 수 있다.
주의 : 위의 방식은, 만료시간이 되었다고 해서, 실제로 메모리에서 캐시 데이터가 삭제되는것이 아니라, get 함수를 호출할때, 만료시간을 체크하여, 캐시 데이터를 삭제하는 방식이다.
만약 get / set 등을 하지 않는 시간에도, 만료된 캐시를 삭제하고 싶다면, Observer 객체를 만들어서, 주기적으로 만료시간을 체크하여야 할것이다.
'개발팁' 카테고리의 다른 글
| jquery 의 $.ajax 에 Promise 패턴 이용하기 (0) | 2018.11.07 |
|---|---|
| 자바스크립트 다국어 i18n 의 sendMissing 기능을 이용한, 누락 key 관리기능 구현 (0) | 2018.11.07 |
| C# Winform 파일 복사시 프로그레스바 표시하기 (0) | 2017.12.18 |
| C# WinForm GroupBox 에 CheckBox Title 만들기 (0) | 2017.11.01 |
| C# ComponentOne FlexGrid 행번호(line number) 표시하기 (0) | 2017.10.28 |
