An easy way of syncing with locaStorage and keeping js types?

Question

I have an app that writes data to and reads data from the localStorage.

Basically I have an array of objects that I am changing and reading many times in the code, and all of these changes I want to keep in sync with the localStorage.

Now I could create a function that syncs it every time I need it in the code, but it just sounds a bit ugly and unoptimized to me. Like this

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

and then

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

This would be really bad, because I have to read and write to it hundreds of times in the code, terrible solution.

Now I could also encapsulate it into a function so that all writes and reads and syncs got through it, but still, it will lack many functionalities because I will still need to deal with arrayOfObjects as an array type for multiple array operations like .push and .length.

Any ideas on how I could make this array sync with the localStorage with the fewest possible lines of code? Is there some way I could just write/read to an array type directly in localStorage?

Answer 1

You can create your own Class which extends the native Array, the only difference being that it also saves it in LocalStorage when an operation is performed.

When you want to restore this special Array you would just call it's .restore() method which basically restores it back from LocalStorage.

Here's an example:

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

And this is how it's used:

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

As you can imagine, LocalStorage would now contain an item 'users': [{"name":"John Doe"}].

.. and to restore:

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

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

Keep in mind that there are significant performance implications here. Every time you .push() for example, you would be triggering a _save() on an ever-growing Array.

You can ameliorate that by saving deltas (changes) to your Array in LocalStorage, instead of the whole object, but at that point things start getting complicated.

Use wisely.