时间戳

首页 > 解决方案 > 如何比较对象并在 localStorage 中添加/删除道具？

javascript - 如何比较对象并在 localStorage 中添加/删除道具？

问题描述

即我有一个初始状态：

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

我想检查 my是否具有与 my不时更改的localStorage所有相同属性。initialState

在这里，我向 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
  })
}

标签： javascript

解决方案

回答 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()and 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);
  }
}

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

推荐阅读