Help with Web Storage Needed

JavaScript
1

I am new to javascript. I am working on counting down days to an event on an app. I got this script that does exactly what i want but i also want it to work offline, so that anything the user returns to it, counting down continues. Using example from w3school, i added the highlighted code to make it work offline. It isn’t working. Please can someone put me through on how to make this script continue working offline

 /* To display a Countdown timer until specified Date-Time */
var countdownTime = function(refid)

 {
  // function to be executed when countdown timer reach to 0
  var cdTimer0 = function() {
    // HERE Add the code to be processed
  }

  // http://coursesweb.net/javascript/
  // sets an <option> lists and adds it into <select> with "id" from id parameter
  var setOptions = function(min, max, id) {
    re = '';
    for(var i=min; i<=max; i++) {
      re += '<option value="'+ i +'">'+ i +'</option>';
    }
    document.getElementById(id).innerHTML = re;
  }


  // sets the days in <select> list with days
  this.setDays = function(month) {
    // sets maximum day number according to month
    if(month == 3 || month == 5 || month == 7 || month == 9) var maxday = 30;
    else if(month == 1) {
      if((year % 4) == 0) var maxday = 29;
      else var maxday = 28;
    }
    else var maxday = 31;

    setOptions(1, maxday, refid +'fday');       // adds the option with days
  }

  // sets a object for current datetime and gets current year, month, milliseconds
  var obNow = new Date();
  var year = obNow.getFullYear();
  this.month = obNow.getMonth();
  this.fform = (document.querySelector('form#'+ refid +'timer') != null) ? 1 : 0;     // to know if datetime is from form or not
  var fmills = 0;         // number of milliseconds of ending datetime
  var thisOb = this;      // contains reference to object with this class, to can be used inside function to auto-call
localStorage.setItem('fmills', 0);
localStorage.getItem('fmills');

  // if form field with id="cdttimer"
  if(this.fform == 1) setOptions(year, 2020, refid +'fyear');      // adds the option with years

  // this function is called from Start button. It sets and displays countdown data
  this.setCTimer = function() {
    // gets the difference between milliseconds of datetime from form and current datetime
    obNow = new Date();
    var mills = fmills - obNow.getTime();


    // if mills > 0, sets object and data with mills, else, returns false
    if(mills > 0) {
      // sets Date object with milliseconds of difference between current datetime and datetime from form
      // to get number of years, months, days, minutes and seconds in this milliseconds
      var obCDown = new Date(mills);
      var years = obCDown.getUTCFullYear() - 1970;
      var months = obCDown.getUTCMonth();
      var days = obCDown.getUTCDate() - 1;
      var hours = obCDown.getUTCHours();
      var minuts = obCDown.getUTCMinutes();
      var secs = obCDown.getUTCSeconds();

      // display the time in page, and auto-calls this function after 1 seccond
      document.getElementById(refid +'years').innerHTML = years;
      document.getElementById(refid +'months').innerHTML = months;
      document.getElementById(refid +'days').innerHTML = days;
      document.getElementById(refid +'hours').innerHTML = hours;
      document.getElementById(refid +'mints').innerHTML = minuts;
      document.getElementById(refid +'secs').innerHTML = secs;

      setTimeout(thisOb.setCTimer, 1000);       // auto-calls this function
    }
    else if(this.fform == 1 && mills < -999) alert('The ending datetime must be higher than current datetime.');
    else {
      // calls the cdTimer0() when countdown timer reach to 0
      cdTimer0();

      return false;
    }


  }

  // to set 'fmills' prop., and start the countdown, calls the setCTimer()
  this.startCDT = function() {



    // if element with id="cdttimer" exists, gets data for year, month, day, minutes and seconds
    if(document.getElementById(refid +'timer')) {
      var fyear = (this.fform == 1) ? document.getElementById(refid +'fyear').value : document.getElementById(refid +'fyear').innerHTML;
      var fmonth = (this.fform == 1) ? document.getElementById(refid +'fmonth').value : document.getElementById(refid +'fmonth').innerHTML;
      var fday = (this.fform == 1) ? document.getElementById(refid +'fday').value : document.getElementById(refid +'fday').innerHTML;
      var fhours = (this.fform == 1) ? document.getElementById(refid +'fhour').value : document.getElementById(refid +'fhour').innerHTML;
      var fminutes = (this.fform == 1) ? document.getElementById(refid +'fmints').value : document.getElementById(refid +'fmints').innerHTML;
      var fseconds = (this.fform == 1) ? document.getElementById(refid +'fsecs').value : document.getElementById(refid +'fsecs').innerHTML;

      // sets fmills with milliseconds of ending datetime
      fmills = Date.parse(fmonth+ ' '+ fday+ ', '+ fyear+ ' '+ fhours +':'+ fminutes +':'+ fseconds);

     [COLOR="#FFFF00"] if(mills = >1){localStorage.setItem("fmills", "")
      localStorage.getItem("fmills")
      }[/COLOR]
      // calls setCTimer(), and shows ending time in page
      this.setCTimer();
      if(document.getElementById(refid +'until')) document.getElementById(refid +'until').innerHTML = fmonth +'/'+ fday +'/'+ fyear +' - '+ fhours +':'+ fminutes +':'+ fseconds;
    }

  }
}

// create an object of the countdownTimer class
var objCT = new countdownTime('cdt');
if(objCT.fform == 1) objCT.setDays(objCT.month);        // adds the options with days according to current month

// to start the countdown automatically, delete the three slashes
/// objCT.startCDT();
2

Hi,

Do I understand you correctly: you need a script for a webpage to count down to a specific date in the future?

If this is the case, it shouldn’t make any difference if users are online or offline.
Just have the script grab the current time according top their computer/device and initialize the countdown as soon as a user opens it.
If they then shut the page and return at a later time, then just reinitialize the script using the current time as a starting point.

3

Thanks Pullo for taking time to answer my question. Pls one more question, how do i initialize the countdown, like i said am new to javascript

4

If the code isn’t contained within “function functionName(){ blah blah blah }”, then it initializes as soon as it loads. If it IS within a function, then you can “window.onload = functionName;” (notice the lack of “()” for the function name…).

Or… jQuery “$(document).ready(function(){});” can start it, as well. If you’re using jQuery.

HTH,

:slight_smile:

5

Thank you very much WolfShade