Faire une citation aléatoire Générateur seulement Générer un devis par jour

Question

J'ai créé un générateur de devis aléatoire pour mon application Angular. Le code du composant ressemble à ceci:

qotd = this.quotes[Math.floor(Math.random() * this.quotes.length)]; 

C'est tirant à partir des données qui ressemble à ceci:

quotes = [ 
    { 
     quote: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus euismod magna magna, euismod tincidunt libero dignis.", 
     author: 'Sorato Violasa' 
    }, 
    { 
     quote: "Nullam dignissim accumsan magna vitae rhoncus. Phasellus euismod magna magna, euismod tincidunt libero dignis.", 
     author: 'Vito Dignaora' 
    }, 
    { 
     quote: "In tincidunt imperdiet augue, quis sollicitudin mi tincidunt ut.", 
     author: 'Hivalo Amettioa' 
    }, 
    { 
     quote: "hasellus accumsan erat vitae enim blandit, quis euismod ipsum sollicitudin.", 
     author: 'Grasha Plojiva' 
    }, 
    ]; 

Et puis, à mon avis, je le fais:

<div class="quotes"> 
    <p class="quote"> 
     {{qotd.quote}} <br><br> 
     ~ {{qotd.author}} 
    </p> 
</div> 

La chose est, En ce moment, cela va générer une nouvelle citation chaque fois que le composant se recharge, ce qui peut être plusieurs fois au sein d'une même session. Ce que je réalise maintenant serait mieux d'en faire un générateur de devis quotidien. Donc, cela ne générerait un nouveau devis que si la date change. Quelle est la manière la plus simple d'implémenter quelque chose comme ça? Il est assez facile de générer la date et le jour de la semaine, comme ceci:

date = new Date(); 
    dayNumber = this.date.getDay(); 

Mais comment pourrais-je calculer quand le jour de la semaine change afin de déclencher une nouvelle instance?

Answer 1

Considérons un schéma où le serveur prépare 3 guillemets: un pour hier, aujourd'hui et demain. Chaque nouveau jour, hier est enlevé et un nouveau demain a été ajouté. De cette façon, la citation sur le client peut être modifiée juste après minuit heure locale du client et tout le monde voit la même citation le même jour local. Il n'y a nulle part plus de 14 heures de différence entre UTC et le serveur. Si le serveur base les clés sur l'UTC, chaque client aura un nombre de guillemets approprié et la base de données de devis ne sera pas transmise à chaque client à chaque changement. .

var quotes = { 
 
    '20171012':{quote:'one',author:'fred'}, 
 
    '20171013':{quote:'two',author:'mary'}, 
 
    '20171014':{quote:'three',author:'sue'} 
 
}; 
 

 
function showQuote(quotes) { 
 
    var d = new Date(); 
 
    var key = '' + d.getFullYear() + 
 
      ('0'+(d.getMonth()+1)).slice(-2) + 
 
      ('0'+d.getDate()).slice(-2); 
 
    return quotes[key] 
 
} 
 

 
// On 2017-10-13 shows quote: two, author: mary 
 
console.log(showQuote(quotes));

Answer 2

Une approche que vous pouvez prendre est de sauver la journée en cours sur le client via localStorage. Dans votre composant, vérifiez si nous avons la clé currentDay dans notre localStorage, sinon créez-la, enregistrez la valeur currentDay et la qotd à l'intérieur d'un objet. La prochaine fois que vous rechargerez votre composant, vous devriez déjà avoir un qotd assigné dans votre localStorage, donc nous vérifions la date enregistrée dans localstorage et celle que nous générons. Si elles sont différentes, nous savons que le jour a changé.

//PSUEDOCODE (haven't tested, but should give you a good idea) 
    function(){ 
    this.qotd = this.quotes[Math.floor(Math.random() * this.quotes.length)]; 

    if(!window.localStorage.getItem('todayDate')){  
     let currentDay = new Date().getDay(); 
     let storageItem = JSON.stringify({ 
      currentDay, 
      qotd: this.qotd 
     }) 
     window.localStorage.setItem('currentDay',storageItem) 
     } 
     else { 
     var existingQOTD = JSON.parse(window.localStorage.getItem('todayDate')); 
     let currentDay = new Date().getDay(); 
     if(existingQOTD.currentDay !== currentDay){ 
     let storageItem = JSON.stringify({ 
      currentDay, 
      qotd: this.qotd 
     }) 
      window.localStorage.setItem('currentDay', storageItem) 
     } 

     } 
    }