javascript - 从 localstorage 获取项目返回 null

Question

我有一个 React 应用程序，如果本地存储中没有数据，它会从数据库的 API 调用加载项目。然后我将使用数据设置状态并将数据加载到本地存储中。下次加载应用程序时，它将改为从本地存储中获取数据。数据在返回语句中映射出来。

问题是即使本地存储中有数据，它仍然返回 null。

我将从 componentDidMount 加载数据:

下面的代码将运行函数“loadItems”，它首先检查本地存储中是否有任何数据(名称为“workItems”)，如果有，则将其存储在状态中。如果不是，它将在 api 调用中调用数据库，将数据存储到 state，并将数据存储在 localstorage 中，下次组件安装时将使用这些数据。我已确认数据存储在浏览器中。但是当本地存储中的数据存在，被映射到状态并最终在渲染函数的返回中映射出来时，它会提示数据为“空”。怎么会？数据存储在本地存储中，当我从开发工具检查它时，它就存在于那里。

componentDidMount() {
  this.loadItems(false);
}

async loadItems(forcedUpdate) {
  const payload = {
    forcedUpdate: forcedUpdate
  };
  if (localStorage.getItem('workItems').length > 0) {
    let data = localStorage.getItem("workItems");
    this.setState({
      workitems: localStorage.getItem("workItems"),
      loading: false,
      sources: allSources,
      showSources: allSources,
    }, () => {
      return;
    });
  }

  var apiUrl = "api/WorkItem/GetWorkItems";

  const response = await Axios.default.post(apiUrl, payload);
  console.log(response);
  var allSources = response.data.items
    .map(item => item.source)
    .filter((value, index, self) => self.indexOf(value) === index);

  this.setState({
    workitems: response.data.items,
    loading: false,
    sources: allSources,
    showSources: allSources,
    failedScrape: response.data.failedscrape,
    lastUpdated: response.data.lastUpdated
  });
  localStorage.setItem('workItems', response.data.items);

}

Answer 1

localStorage.setItem(key, value) 期望值为字符串。当您传递诸如 [{id: 1}] 之类的对象时，它会将其类型转换为字符串。因此对象变成了这样的字符串 [object Object]"。

localStorage.setItem('test', [{id: 1}]);
const item = localStorage.getItem('test');
console.log(item) // "[object Object]" a string
console.log(item[0]) // "["
console.log(item[1)) // "o"

解决方案

解决方法是在保存到localStrage之前先字符串化，拿到item后再解析。

localStorage.setItem('workItems', JSON.stringify(response.data.items));
// when you get the items
if (JSON.parse(localStorage.getItem('workItems')).length > 0)