Question

我跟随Progressive Web App lab from Google并且说它为了简单起见使用localStorage但我们应该将其更改为idb。

基本上，我们希望存储城市列表以显示其天气信息。

我尝试使用简单的idb跟随信息here，但我认为我对此太新了，我无法获得任何此类信息。我应该这样做：

const dbPromise = idb.open('keyval-store', 1, upgradeDB => {
  upgradeDB.createObjectStore('keyval');
});

并且keyval是我的变量的名称，我将使用keyval.get（）或keyval.set（）来获取和存储值？

我决定转向更简单的idbKeyval，我正在做：

app.saveSelectedCities = function() {
  var selectedCities = JSON.stringify(app.selectedCities);
  idbKeyval.set(selectedCities);
};

而不是localStorage示例：

app.saveSelectedCities = function() {
  var selectedCities = JSON.stringify(app.selectedCities);
  localStorage.selectedCities = selectedCities;
};

和

app.selectedCities = idbKeyval.keys().then(keys => console.log(keys)).catch(err => console.log('It failed!', err));

而不是localStorage示例：

app.selectedCities = localStorage.selectedCities;

但我的应用程序没有加载任何数据，在开发人员工具控制台中，我得到：

app.js:314 Uncaught ReferenceError: idbKeyval is not defined(…)

我确定我错过了一些微不足道的东西，但这些是我使用javascript和喜欢的第一步，所以请，任何有关此处触及的任何要点的帮助将不胜感激！

Answer 1

鉴于您看到的错误，您似乎忘记了包含idb-keyval库。

Answer 2

我也正在经历此过程，并希望它与localForage一起使用。花了一点时间，因为它也是我的新手，但这是我用于保存和加载功能的功能，使它们全部正常工作。

// TODO add saveSelectedCities function here
// Save list of cities to localStorage
app.saveSelectedCities = function() {
  var selectedCities = JSON.stringify(app.selectedCities);
  localforage.setItem('selectedCities', selectedCities);
  //localStorage.selectedCities = selectedCities;
}


localforage.getItem('selectedCities').then(function(cityList) {
  app.selectedCities = cityList;
  app.selectedCities.forEach(function(city) {
      app.getForecast(city.key, city.label);
  });
}).catch(function(err) {
    app.updateForecastCard(initialWeatherForecast);
    app.selectedCities = [
    {key: initialWeatherForecast.key, label: initialWeatherForecast.label}
    ];
    app.saveSelectedCities();
});

使用idb而不是localStorage

2 个答案: