渐进式网站应用会很快启动并马上可用。在目前的状态中（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