[Vuejs]-Web Storage is not storing my boolean values. What could be reason for this?

by

0👍

From what I see on the code, you may be resetting the local storage to your default data every time the component is mounted.

You should do the opposite on mounted, set your this.fieldsTest data = localStorage fieldsTest, and then update localStorage every time you change a checkbox.

Also make sure you have considered multiple users on the same browser because they might have different visibility options.

0👍

I think you have to watch the fieldsTest and if is there any changes in any of the object for visible property then set it into a local storage.

watch: {
    fieldsTest: {
      handler(newValue) {
        localStorage.setItem('fieldsTest', JSON.stringify(newValue));
      },
      deep: true
    }
}

Now, In mounted() hook, You can load the data from localStorage back into the fieldsTest array.

mounted() {
    const updatedFieldsTest = JSON.parse(localStorage.getItem('fieldsTest'));
    if (updatedFieldsTest) {
      this.fieldsTest = updatedFieldsTest;
    }
}

Leave a comment