Fix typo in form key that uses $persist

[jannisborgers]

I’m using the wonderful Persist plugin to store user address information in the browser so that they don’t have to re-enter the information every time they use the form. It‘s persisted using js-cookie instead of localStorage. I set an expiry of 90 days.

Alpine uses a property called formData to persist and pre-fill the form. Submitting the form sends the data to an external API. I had a typo and the city input incorrectly used the key City instead of city, making the API call fail.

Fixing the typo was easy, but if someone has used the form already, their persisted data still uses the City key and the input shows "undefined" because the new key is city.

Is there a way to fix this without the user having to manually clear the cookies?

The only way I can think of is changing the key of the formData property that is being persisted, so that a new cookie string is added and the old one is ”retired“ until it expires. That would mean having to change it in a couple of dozen places and my OCD itches when I have to use formData1, formData2 etc. depending on how the API changes over time.

[ekwoka]

Just on init, look at the data and check for the old one and change it to the new one...

Also, should probably have a default value, not just undefined...

[jannisborgers]

Hi @ekwoka – thanks for the reply. I’m not sure I understand your solution. Here’s my component, stripped down version:

const form = () => {
  return {
    formData: this.$persist({
      street: '',
      City: '',
      country: '',
    }).using(cookieStorage)
  }
}

To fix the API call, I need it to be this, notice lowercase city:

const form = () => {
  return {
    formData: this.$persist({
      street: '',
      city: '',
      country: '',
    }).using(cookieStorage)
  }
}

The whole formData object is modeled to inputs inside the component:

<input type="text" id="City" name="City" x-model="formData['City']">
<!-- Changed to: -->
<input type="text" id="city" name="city" x-model="formData['city']">

Only changing the code like above results in the input showing pre-filled with the word undefined. This is because when I visited the page with the first component, my browser saved _x_formData with a City key, while the new code expects a city key to bind the input value.

Do I understand correctly that you would suggest this?

init() {
  if (this.orderData.City) {
    this.orderData.city = this.orderData.City;
   delete this.orderData.City;
  }
}

[ekwoka]

Yes, basically.

or more generally you can do something like

init() {
  this.orderData = Object.fromEntries(Object.entries(this.orderData).map(([k,v]) => [k.toLowerCase(),v]))
}

Which would also prevent such mistakes in the future...

But yes, basically, for some amount of time, you have this in there "fixing" everything.

[jannisborgers]

Thanks a lot. Some keys have to be uppercase though, the API in question is more than a little inconsistent. But I get the idea. Closing this.