Twórz JavaScript Random Generator ofert Wygeneruj tylko jeden cytat dziennie

Question

Stworzyłem generator losowych ofert dla mojej aplikacji Angular. Kod komponent wygląda następująco:

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

To się ciągnie od danych, które wygląda następująco:

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' 
    }, 
    ]; 

i wtedy moim zdaniem to zrobić:

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

Chodzi o to, teraz wygeneruje nową ofertę za każdym razem, gdy składnik zostanie ponownie załadowany, co może nastąpić wiele razy w ciągu jednej sesji. Teraz zdaję sobie sprawę, że lepiej byłoby uczynić z tego generator codziennych cytatów. Tak więc wygenerowałby nowy cytat tylko wtedy, gdy data się zmieni. Jaki jest najprostszy sposób wdrożenia czegoś takiego? Jest to dość łatwe do wygenerowania datę i dzień tygodnia, tak:

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

Ale jak bym obliczyć kiedy dzień tygodnia zmienia się, aby wystrzelić nową instancję?

Answer 1

Rozważmy schemat, w którym serwer przygotowuje 3 cytaty: jeden na wczoraj, dziś i jutro. Każdy nowy dzień, wczoraj jest usuwany i dodawane jest nowe jutro. W ten sposób wycena na kliencie może zostać zmieniona tuż po północy czasu lokalnego klienta i wszyscy widzą tę samą ofertę w tym samym dniu lokalnym.

Nigdzie na Ziemi nie ma więcej niż 14 godzin różnej od UTC, więc jeśli serwer będzie bazował na kluczach UTC, każdy klient będzie miał odpowiednią liczbę ofert, a cała baza ofert nie zostanie przekazana do każdego klienta za każdym razem, gdy ulegnie zmianie .

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

Jedno podejście można wziąć zapisuje bieżący dzień na kliencie poprzez localStorage. W swoim komponencie sprawdź, czy mamy klucz currentDay w naszym localStorage, jeśli nie, utwórz wartość currentDay i qotd wewnątrz obiektu.

Następnym razem, gdy ponownie załadujesz swój komponent, powinieneś mieć już przypisany qotd w swoim lokalnym usłudze StorageScape, więc to, co robimy, to sprawdzenie daty zapisanej w localstorage i obecnej, którą generujemy. Jeśli są inne, wiemy, że dzień się zmienił.

//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) 
     } 

     } 
    }