解答XY的Y

Question

即我有一个初始状态：

const initialState = {
  val1: 1,
  val1: 2,
}

我想检查我的localStorage是否具有与我的initialState相同的属性，这些属性会不时变化。

如果是=>跳到下一个道具
如果否=>将prop: val添加到localStorage
如果localStorage中有一个道具在initialState上不存在=>从localStorage中删除该道具。

在这里，我向localStorage添加了新的道具，该道具可以工作，但是在每个新的prop上，我都添加了整个newState。

const setNewLocalStorage = () => {
  const localStorageState = getLocalStorageState()
  let newState = localStorageState
  Object.keys(initialState).map(key => {
    if (!localStorageState.hasOwnProperty(key)) {
      newState[key] = initialState[key]
      setStateToLocalStorage(newState)
    }
    return
  })
}

Answer 1

解答XY的Y

这是存储数据的方式：

const setNewLocalStorage = () => {
  Object.keys(initialState).map(key => {
    // Do various checking to decide whether or not to write
    if (!localStorageState.hasOwnProperty(key) || JSON.parse(localStorage.getItem(key)) !== initialState[key]) {
      localStorage.setItem(key, JSON.stringify(initialState[key])
    }

    // But actually that is more complex than need be.
    // Why not just store the data every time, and be done with?
    localStorage.setItem(key, JSON.stringify(initialState[key])
  })
}

请注意，在读写localStorage时建议使用JSON.stringify()和JSON.parse()，因为localStorage仅存储字符串，而数据似乎包含数字。

第二部分：

如果localStorage中有一个道具在initialState上不存在=>从localStorage中删除该道具

我不确定这是否明智。如果您在应用中添加了一个将数据也存储在localStorage中的插件，该怎么办？您最终将清除该插件的数据！

因此，拥有要删除的“ oldKeys”的特定列表可能更安全。或者，为您的键命名空间，以便您知道哪些键属于应用程序的这一部分。

也就是说，这是您可以按照要求执行的操作：

for (var i = localStorage.length; i--;) {
  var key = localStorage.key(i);
  if (!initialState.hasOwnProperty(key)) {
    localStorage.removeItem(key);
  }
}

我建议向后循环，因为如果删除项目，长度和索引可能会更改。（或者，先提取密钥，然后再提取每个密钥。）

Answer 2

更简单的解决方案

我鼓励您将整个状态对象存储在一个键下：

// Load state (but on first load, start with the defaultState)
var appState = JSON.parse(localStorage.getItem('appState') || "null") || defaultState;

// Save state
localStorage.setItem('appState', JSON.stringify(appState));

这要简单得多，既可以满足您的两个条件，又可以将appState与localStorage中的任何其他键分开。

请注意，在第一次运行时localStorage.appState是不确定的，JSON.parse()无法处理该值，因此我们使用||将其转换为"null"。在解析之外，我们再次使用||将null转换为新用户应以的defaultState。

还请注意，我将initialState重命名为appState，因为这是可以更改的更好的名称。

如何比较对象并向localStorage添加道具或从中删除道具？

2 个答案:

解答XY的Y

更简单的解决方案