Простой способ синхронизации с 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, а не весь объект, но в этот момент все начинает усложняться.

Используйте с умом.