जावास्क्रिप्ट रैंडम कोट जेनरेटर बनाएं प्रति दिन एक उद्धरण उत्पन्न करें

Question

मैंने अपने कोणीय ऐप के लिए एक यादृच्छिक उद्धरण जनरेटर बनाया है। घटक कोड इस तरह दिखता है:

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

डेटा है कि इस तरह दिखता है से खींच रही है यही कारण है कि:

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

और फिर मेरे विचार में मैं यह कर:

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

बात है, इस समय घटक फिर से लोड होने पर हर बार एक नया उद्धरण उत्पन्न करेगा, जो एकल सत्र में कई बार हो सकता है। अब मुझे एहसास होगा कि यह एक दैनिक उद्धरण जनरेटर बनाना बेहतर होगा। इसलिए तिथि बदलने पर यह केवल एक नया उद्धरण उत्पन्न करेगा। इस तरह कुछ लागू करने का सबसे आसान तरीका क्या है? यह काफी आसान सप्ताह की तारीख और दिन उत्पन्न करने के लिए है इस तरह:

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

लेकिन मैं कैसे की गणना जब क्रम में सप्ताह में परिवर्तन के दिन एक नया उदाहरण बंद आग होगा?

Answer 1

एक ऐसी योजना पर विचार करें जहां सर्वर 3 उद्धरण तैयार करता है: एक कल, आज और कल के लिए। प्रत्येक नए दिन, कल हटा दिया गया है और एक नया कल जोड़ा गया। इस तरह क्लाइंट पर बोली मध्यरात्रि ग्राहक स्थानीय समय के ठीक बाद बदला जा सकता है और हर कोई उसी स्थानीय दिन पर एक ही बोली देखता है।

यूटीसी के लिए 14 घंटे से अधिक समय पर पृथ्वी पर कहीं भी नहीं, इसलिए यदि सर्वर यूटीसी पर चाबियाँ रखता है तो प्रत्येक ग्राहक के पास कोट्स की उचित संख्या होगी और प्रत्येक उद्धरण डेटाबेस प्रत्येक क्लाइंट को हर बार बदलता नहीं है ।

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

एक दृष्टिकोण ले जा सकते हैं localStorage के माध्यम से ग्राहक पर वर्तमान दिन की बचत है। अपने घटक में, जांचें कि हमारे पास हमारे स्थानीय स्टोरेज में currentDay कुंजी है, यदि इसे नहीं बनाया गया है, तो currentDay मान और qotd किसी ऑब्जेक्ट के अंदर सहेजें।

अगली बार जब आप अपना घटक पुनः लोड करेंगे, तो आपके पास पहले से ही आपके स्थानीय स्टोरेज में एक qotd असाइन किया जाना चाहिए, इसलिए हम जो करते हैं वह स्थानीय स्टोरेज में सहेजी गई तारीख और वर्तमान उत्पन्न करने वाली तारीख की जांच करता है। यदि वे अलग हैं तो हम जानते हैं कि दिन बदल गया है।

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

     } 
    }