Question

我有一个应用程序，可以将数据写入localStorage并从中读取数据。

基本上我有一个对象数组，我在代码中多次更改和读取，所有这些更改我都希望与localStorage保持同步。

现在我可以创建一个在代码中每次需要它时同步它的函数，但它听起来有点难看并且对我来说没有优化。喜欢这个

arrayOfObjects.push(newItem);
localStorage.setItem('objects', arrayOfObjects);

然后

arrayOfObjects = localStorage.getItem('objects');
length = arrayOfObjects.length

这真的很糟糕，因为我必须在代码中读取和写入数百次，这是一个糟糕的解决方案。

现在我也可以将它封装到一个函数中，以便所有的写入和读取以及同步都通过它，但是，它仍然缺少许多功能，因为我仍然需要将arrayOfObjects作为一个数组类型来处理多个数组操作，如.push和.length。

关于如何使用尽可能少的代码行使这个数组与localStorage同步的任何想法？有没有什么方法可以直接在localStorage中写入/读取数组类型？

Answer 1

您可以创建自己的Class扩展原生Array，唯一的区别是，当执行某项操作时，它还会在LocalStorage中保存它

当你想要恢复这个特殊的Array时，你只需要调用它的.restore()方法，它基本上可以从LocalStorage恢复它。

以下是一个例子：

class LocalArray extends Array {
  constructor(name, ...items) {
    super(...items)
    this._name = name
  }

  push(item) {
    Array.prototype.push.call(this, item)

    this._save()
  }

  pop() {
    const popped = Array.prototype.pop.call(this)

    this._save()

    return popped
  }

  // rest of operations, i.e splice, reduce, etc..

  restore() {
    const data = window.localStorage.getItem(this._name)
    const items = data ? JSON.parse(data) : []

    items.forEach(item => {
      Array.prototype.push.call(this, item)
    })
  }

  _save() {
    window.localStorage.setItem(this._name, JSON.stringify(this))
  }
}

这就是它的用法：

const users = new LocalArray('users')
users.push({ name: 'John Doe' })
users.push({ name: 'Mary Jane' })
users.pop()

可以想象，LocalStorage现在包含一个项目'users': [{"name":"John Doe"}]。

..并恢复：

const users = new LocalArray('users')
users.restore()

console.log(users) // logs [{ name: 'John Doe' }]

请注意，这里有重要的性能影响。例如，每次.push()时，您都会在不断增长的数组上触发_save()。

您可以通过在LocalStorage中将增量（更改）保存到您的数组而不是整个对象来改善这一点，但此时事情开始变得复杂。

明智地使用。

与locaStorage同步并保持js类型的简单方法？

1 个答案: