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

Question

Ie I have an initial state:

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

I want to check if my localStorage has all the same properties as my initialState which changes from time to time.

• If yes => skip to the next prop
• if no => add prop: val to localStorage
• if there is a prop in localStorage that doesn't exist on initialState => remove the prop from localStorage .

Here I'm adding new props to localStorage which works but on every new prop I'm adding the entire 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

Answering the Y of XY

This is how you could store the data:

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])
  })
}

Note that it is advisable to use JSON.stringify() and JSON.parse() when reading or writing to localStorage, because localStorage only stores strings, whilst your data appears to contain numbers.

---

Second part:

If there is a prop in localStorage that doesn't exist on initialState => remove the prop from localStorage

I'm not sure this is advisable. What if you add a plugin to your app which also stores data in localStorage? You will end up clearing that plugin's data!

So it might be safer instead to have a specific list of "oldKeys" which you want to remove. Or alternatively, namespace your keys, so you know which keys belong to this part of the app.

That said, here is how you could do what you asked for:

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

I recommend looping backwards because the length and indexes may change if you remove items. (Alternatively, extract the keys first and then forEach them.)

Answer 2

Simpler solution

I would encourage you to store the entire state object under one key:

// 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));

This is much simpler, fulfils both of your criteria, and keeps your appState separate from any other keys in localStorage.

Note that on the first run localStorage.appState will be undefined, a value which JSON.parse() cannot handle, so we use || to convert that into "null" . Outside the parse, we use || again to convert that null into the defaultState that new users should start with.

Also note that I renamed initialState to appState because that is a better name for something which can change.