漸進式網站應用會很快啟動并馬上可用。在目前的狀态中（step-04），我們的天氣app啟動很快，但是不可用。因為還木有資料。 我們要使用一個AJAX請求去擷取資料，但是這會導緻一個額外的請求，并使初始加載時間更長。但仍然要在第一次加載時提供真實的資料。
對于這個代碼實驗室，我們将模拟伺服器将天氣預報直接注入到JavaScript中，但在生産應用程式的過程中，最新的天氣預報資料将由伺服器根據使用者的IP位址地理位置注入。
代碼中已經包含資料并且我們将要進行注入，就是這個 <code>initialWeatherForecast</code> 方法，我們開始使用下一個步驟。
但是，我們如何知道什麼時候顯示這些資訊，當天氣應用程式從緩存中提取時，這些資訊可能與未來的載入無關？當使用者在後續通路中加載應用程式時，他們可能已經改變了城市，是以我們需要加載這些城市的資訊，而不一定是他們的第一個次查找的那個城市。
使用者首選項（如使用者已訂閱的城市清單）應使用IndexedDB或其他快速存儲機制進行本地存儲。為了盡可能簡化這個代碼實驗，我們使用了 <code>localStorage</code>, 這對生産應用程式來說并不理想，因為它是一個阻塞的同步存儲機制，在某些裝置上可能非常慢。
額外的提示: 利用idb替換<code>localStorage</code> 來實作, 確定localForage做為idb的一個簡單包裝。
首先，我們添加儲存使用者設定的所需要的代碼在你的代碼中找到下面所示的 TODO 注視。
在注視下面添加下列代碼。
接下來，我們添加啟動代碼來檢查使用者是否有任何已儲存了城市并渲染它們，或使用注入的資料。找到以下注釋：
在注視下面添加下列代碼:
啟動代碼檢查是否有任何城市儲存在本地存儲。如果是，則解析本地存儲資料，然後為每個儲存的城市顯示天氣預報卡。如果否，則啟動代碼隻是使用虛假預測資料，并将其儲存為預設城市。
最後，您需要修改“添加城市”按鈕程式，将標明的城市儲存到本地存儲
更新你的 <code>butAddCity</code> 點選程式，使它和下面的代碼一樣:
新增了 <code>app.selectedCities</code> 的初始化，如果不存在，就調用 <code>app.selectedCities.push()</code> 和 <code>app.saveSelectedCities()方法</code>。
當第一次運作，你的app會通過 <code>initialWeatherForecast</code>立即顯示使用者的天氣預報
添加一個新的城市 (點選右上角加号圖示) 并确認，就顯示兩個卡片了。
重新整理浏覽器并确認app加載這了兩個天氣預報且展示最新資訊。
TRY IT