使用 idb 代替 localStorage答案

【问题标题】：Using idb instead of localStorage使用 idb 代替 localStorage
【发布时间】：2017-03-13 12:32:38
【问题描述】：

我正在关注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 之类的第一步，所以请对这里涉及的任何要点提供任何帮助，我们将不胜感激！

【问题讨论】：

你是否包含了 idb-keyval 库？
@Marco 是的。我知道它必须是那样简单而愚蠢的东西。随意添加这个作为答案，我会选择它作为正确的答案。

标签： javascript indexeddb progressive-web-apps

【解决方案1】：

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

【讨论】：

【解决方案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();
});

【讨论】：