使用 idb 而不是 localStorage

Question

我正在关注 Progressive Web App lab from Google，它说为了简单起见，它正在使用 localStorage，但我们应该将其更改为 idb。

基本上，我们想要存储一个城市列表来显示它们的天气信息。

我尝试按照信息 here 使用普通的 idb，但我认为我对此太陌生了，我无法获得任何信息。我应该这样做吗：

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

Using idb instead of localStorage

javascript

indexeddb

progressive-web-apps