JavaScriptをランダムに作成するジェネレータは1日に1つの見積もりを生成します

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> 

事は、あるコンポーネントのコードは次のようになります今では、コンポーネントが再ロードされるたびに新しい見積もりが生成されます.1回のセッションで複数回になることがあります。私が今実現していることは、これを日々のクォートジェネレータにすることです。したがって、日付が変更された場合にのみ新しい見積もりが生成されます。このようなものを実装する最も単純な方法は何ですか？それはこのように、日付と曜日を生成するために十分に簡単です：

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

しかし、順に曜日が変わったが、新しいインスタンスをオフに解雇したときに、私は計算だろうか？

Answer 1

サーバーが昨日、今日、そして明日の3つの見積もりを用意する計画を考えてみましょう。昨日は毎日新しい日が削除され、新しい明日が追加されました。こうすることで、クライアントの見積もりはクライアントの現地時間の真夜中に変更でき、誰もが同じ現地日に同じ見積もりを見ることができます。

地球上ではUTCとは14時間以上異なるので、サーバがUTCに基づいている場合、すべてのクライアントは適切な数の引用符を持ち、変更のたびにすべての引用データベースはすべてのクライアントにプッシュされません。あなたが取ることができ

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キーがlocalStorageにあるかどうかを確認し、作成しない場合はcurrentDayの値とqotdをオブジェクトの中に保存してください。

次にコンポーネントをリロードするときは、すでにlocalStorageにqotdが割り当てられている必要があります。したがって、localstorageに保存されている日付と生成された現在の日付を確認してください。彼らが違うなら、その日が変わったことを知っています。

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

     } 
    }