Лесен начин за синхронизиране с locaStorage и запазване на js типове?

Можете да създадете свой собствен 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, вместо целия обект, но в този момент нещата започват да се усложняват.

Използвайте разумно.