Vue and localStorage?

I built my first ever app with the Vue-cli the best part of a year ago and I've been going through my repos and there wre a couple of things I've wanted to add it but I'm not sure how.

The working example is here and git repo

I have it setup to add an new example to the list, but whnever you refresh the page it removes the newly added items. Is there a way to use localStorage (or something else?) to be to store these when you refresh the page? I did attempt to add localStorage using the example found in the docs, but it didn't work so I'm doing something wrong I'm not sure what.

Also is there a way to have a sort of console and actually run the code I've set out in the examples?

Any help or suggestions most appreciated.

Comments

[Michael Z]

Not sure if localStorage is truly what you want here as it is indeed local. So when you add an item on your PC, you won't be able to see it on your phone, etc.

Here's how a simple localStorage implementation could look like in this file: github.com/cguttweb/array-helper/b...

1. Append localStorage to arrayMethods

Inside data() retrieve the added items (or default it to an empty array), then add it to arrayMethods

const addedMethods = JSON.parse(localStorage.getItem('addedMethods')) || []

// ...

return {
  // ...
 arrayMethods: [
    // ...,
    ...addedMethods,
  ]
}

1. In addMethod(), set the localStorage:

const method = {
        name: this.newMethodName,
        method: this.newMethod,
        methodExample: this.newMethodExample
}
this.arrayMethods.push(method);

const addedMethods = localStorage.getItem('addedMethods') || []
addedMethods.push(method)
localStorage.setItem('addedMethods', JSON.stringify(addedMethods))

[Chloe]

Thanks for the reply I was attempting something similar but I think I just missed a step. I wasn't sure about LS if not LS then Vuex? Is there an alternative? I'm still pretty much a beginner to lot of this stuff so open to any suggestions.

[Michael Z]

It really depends on your use case. But if you want to persist data so that, when one user adds a method, every person on the internet should see it too, then vuex won't help here either. It is just a way to manage your local state.

In such a case, what you actually want is to persist the data in a database like MySQL (requires server) or maybe something serverless like Firebase. Firebase is probably easier to set up as you don't need to host the database yourself somewhere and there is a free tier that should be good enough.

[Chloe]

I've read a bit on Firebase I will take a look and give it a go thanks :)

[tommybravo]

1. For me, the easiest solution would be to use Vuex with vuex-persistedstate
2. If you want to roll your own solution, I may have missed something, but I just cannot find in the source where you are saving anything to LocalStorage. I saw in mounted() that it loads things saved in LS, but is anything saved before somewhere?

[Chloe]

Thanks for the reply. I did try saving to LS but it didn't work so I think I deleted it.. i was attempting to do something like this

      try {
        this.arrayMethods = JSON.parse(localStorage.getItem('arrayMethods'));
      } catch (e) {
       localStorage.removeItem('arrayMethods');
     }
     if (localStorage.name) {
       this.name = localStorage.newMethodName;
     }
     if (localStorage.newMethod) {
      this.method = localStorage.newMethod;
    }
    if (localStorage.newMethodExample) {
      this.example = localStorage.newMethodExample;
    }

which is based on the example given in the docs here but I think I was just doing it wrong. I've used localStorage before but not with Vue so not sure if I'm just missinga step somewhere.

I thought about Vuex but 1. I don't really understand it (I've tried and failed) and 2. I thought it might be overkill for a fairly small project like this but I amy well be wrong.