Create a cache object in javascript

Question

My intent is to use this object to cache data from web responses. The cache object should only be valid for the current data.

var myCache = {

        Cache: { Date: '', Data: [] },

        AddData: function(Name, Data){
            myCache.CheckCache();
            myCache.Cache.Data[Name] = Data;
        },

        GetData: function(Name){
            myCache.CheckCache();
            return myCache.Cache.Data[Name];
        },

        HasData: function(Name){
            myCache.CheckCache();
            var data = myCache.Cache.Data[Name];
            var val = true;
            if(typeof data === "undefined" || data == null || data === '') {
                val = false;
            }
            return val;
        },

        CheckCache: function(){

            var currentDate = myCache.GetCurrentDate();
            var CacheDate = myCache.Cache.Date;
            if(CacheDate != currentDate){
                console.log('Reset Cache');
                myCache.Cache.Data = [];
                myCache.Cache.Date = currentDate;
            }
        },

        GetCurrentDate: function(){
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1;
            var yyyy = today.getFullYear();
            if(dd < 10) {
                dd = '0' + dd;
            } 
            if(mm < 10) {
                mm = '0' + mm;
            } 
            var returnDate = yyyy + '-' + mm + '-' + dd;
            return returnDate;
        }
    };

When the main page loads I call

myCache.CheckCache();

When I get data in the application I use the cache object as

   var data;
   if(myCache.HasData('UserData')){
       data = myCache.GetData('UserData');
   } else{
       data = myWebApi.Get(Url);  
   }

Is there a better way of creating a cache object? Or any suggestions of improvment

Answer 1

There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.

Phil Karlton

I'd suggest leaving the job to the browser and to the experts that make it. Additionally, peppering your code with a lot of if-else just to use your cache is too much unnecessary effort really.

Now if you insist going in this route...

• First, your function names. They're like from C# land. JavaScript usually uses camel case, with the very first letter in lower case.

• There's no sense storing date in a formatted way. You can store it in milliseconds instead. You can get the current timestamp using Date.now().

• Your cache tracks time globally, not on a per-item basis. This means there will be a period after wiping that you'll be loading stuff fresh instead of the cache.

• An better way to clear an array is to set its length property to 0 instead of assigning another array.

• You can take advantage of localStorage to cache content more persistently than just in memory. Note that localStorage has a size limit of 5-10Mb depending on the browser and it only stores strings (objects need be serialized first).

• Instead of peppering your code with a lot of if-else operations, consider making a wrapper function for data-fetching mechanisms. Sort of like a decorator.

  function cacheWrapper(fn){
    var sourceId = generateIdForFn(fn);
    var isCached = MyCache.hasData(sourceId);
    return isCached ? MyCache.getData(sourceId) : fn();
  }
  
  function() originalGetter{ return someRemoteApi.getData(); }
  
  var cachingGetter = cacheWrapper(originalGetter);
  
  var potentiallyCachedData = cachingGetter();
  

• undefined == null. It's always best to use strict comparison to avoid ambiguity.