使用 api 的本地存储，vanilla js

Question

为了使这篇文章简短而有趣，我的代码是

const searchBox = document.querySelector(".search-box");
searchBox.addEventListener("keypress", setQuery);

function setQuery(e) {
  if (e.keyCode == 13) {
    getResults(searchBox.value);
    searchBox.value = "";
  }
}

function getResults(query) {
  localStorage.setItem("location", searchBox.value);
  let storedItem = localStorage.getItem("location");
  console.log(storedItem);
  fetch(`${api.base}weather?q=${storedItem}&units=imperial&APPID=${api.key}`)
    .then((weather) => {
      return weather.json();
    })
    .then(displayResults);
}

这一切都很好，在搜索框中输入的城市很好地存储在本地存储中，如果刷新页面，我可以查看 google chrome 应用程序部分和看到它仍在本地存储中。

页面刷新后，应用将重置为默认登录页面。

我想我需要使用类似 window.onload = function()

的东西

问题是，如果我正在设置 storedItem，我将无法在 getResults 函数之外访问。

如有任何建议，我们将不胜感激！

Answer 1

从 getResults() 中删除 localStorage.setItem("location", searchBox.value); 并将其添加到 setQuery()。
接下来，将此添加到 getResults()
```
let qry = query == undefined ? 
localStorage.getItem("location") : query;
```
这意味着，如果没有任何查询传递给 getResults(query)，则从键 "location" 下的 localStorage 获取值。
最后将DOMContentLoaded事件绑定到document和getResults()作为事件处理器，
```
document.addEventListener('DOMContentLoaded', getResults)  
```

const searchBox = document.querySelector(".search-box");
searchBox.addEventListener("keypress", setQuery);

function setQuery(e) {
  if (e.keyCode == 13) {
    getResults(searchBox.value);
    localStorage.setItem("location", searchBox.value);
    searchBox.value = "";
  }
}

function getResults(query) {
  let qry = query == undefined ? localStorage.getItem("location") : query;
  console.log(qry);
  fetch(`${api.base}weather?q=${qry}&units=imperial&APPID=${api.key}`)
    .then((weather) => {
      return weather.json();
    })
    .then(displayResults);
};

document.addEventListener('DOMContentLoaded', getResults)

使用 api 的本地存储，vanilla js

Local storage with api, vanilla js

javascript

local-storage