Why local storage not persisting after page refresh

Question

The button text 'completed' should persist after browser refresh based on whether var item is true (after button click). I am not sure what the issue is but I have tried Chrome as well so I don't think it is browser related.

<template>
<button type="button" v-bind:class="order_button_style" @click="on_order_button_click()">
  {{ buttonText }}
</button>
</div>
</template>

<script>
export default {


item: '',
data() {

  return {
  item2: this.item
  }
},
methods: {
on_order_button_click() {
 this.item2 = true;
  localStorage.setItem(this.item2);
}

},
mounted() {
const storedState = localStorage.getItem(this.item2) === 'false';
if (storedState) {
  this.item2 = storedState;
}
},
computed: {
buttonText() {
  return this.item2 === true ? "Completed" : "Complete";
},
order_button_style() {
  return this.item2 === true
    ? "btn btn-danger"
    : "btn btn-primary";
}

}

};
</script>

You're never setting a value in `localStorage`. `setItem` takes 2 params, the name and the value, you're just setting the value. https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem I believe you meant to write `localStorage.setItem('item', this.item2)` and `localStorage.getItem('item')` — Robin-Hoodie, Jun 01 '20 at 12:25
Thank you, but it doesn't seem to have solved the persist problem. I am refreshing the browser and button color and text just reset to the original state where item = '' — jsmith, Jun 01 '20 at 12:33
See my answer below, the `if` block in `mounted` will never run — Robin-Hoodie, Jun 01 '20 at 12:35

Robin-Hoodie · Accepted Answer · 2020-06-01T14:20:42.267

0

localStorage.setItem takes 2 params, name and value.

I believe you meant to write the following:

Setting an item in localStorage

localStorage.setItem('item', this.item2)

and retrieving it

localStorage.getItem('item')

A few comments on other parts of your code:

this.item2 === true can be shortened to this.item2 if item2 can never be anything other than a boolean.
You're currently only using the value from localStorage if it's false, which it will never be because you're only ever calling setItem with a value of true
I'm not sure what you're trying to do with the item prop in the top level of the object
Strongly consider using camelCase for your method names. Follow global conventions

UPDATE:

I think this is what you're trying to achieve:

on_order_button_click() { // Should probably rename this to `onOrderButtonClick`, the current method name hurts to look at
  this.clickedOrderButton = true;
  localStorage.setItem('clickedOrderButton', this.clickedOrderButton);
}


created() {
  this.clickedOrderButton = localStorage.getItem('clickedOrderButton') === "true";
}

I've renamed item2 to clickedOrderButton. I have no idea why you'd name that variable item2 based on the code that is shown.

There's also no need to check whether clickedOrderButton is true before assigning it to clickedOrderButton, as it will resolve to false if it's not present (or intentionally set to something other than true) in localStorage.

Lastly, I've replaced mounted by created. As you're not accessing any DOM elements, there's no need to wait until the component is mounted to run that code

UPDATE#2:

If you have several instances of this component, you'll need to set use a different name than clickedOrderButton. You can use a unique identifier per button, which you can pass as a prop from above.

E.g.

props: {
  id: { type: String, required: true }
}
...
localStorage.setItem(`clickedOrderButton-${this.id}`, this.clickedOrderButton);
...
localStorage.getItem(`clickedOrderButton-${this.id}`);

edited Jun 01 '20 at 14:20

answered Jun 01 '20 at 12:32

Robin-Hoodie

4,886
4
30
63

My code currently looks like this, can you please have a look, it still doesn't behave as expected – jsmith Jun 01 '20 at 13:18
methods: { on_order_button_click() { this.item2 = !this.item2; localStorage.setItem('itemName', this.item2); } }, mounted() { const storedState = localStorage.getItem('itemName'); if (storedState) { this.item2 = storedState; } } – jsmith Jun 01 '20 at 13:18
Thank you very much. I will accept this as the answer as the button does hold state now. However it does change the button state for every single task's button in the list after the page reload – jsmith Jun 01 '20 at 14:09
Made another update to my answer for that. This happens because every component instance shares the state of `localStorage.clickedOrderButton` – Robin-Hoodie Jun 01 '20 at 14:21
No luck with the second update I'm afraid. I have an id column in my database so that should pass through the id but for some reason all the tasks are updated when I click the button – jsmith Jun 01 '20 at 17:20
I'm gonna have to see the rest of your code in that case, hard to say what could be going wrong with just a description – Robin-Hoodie Jun 02 '20 at 07:26
solution here https://stackoverflow.com/questions/62140046/why-local-storage-is-changing-every-entry-in-task-list/62140174#62140174 – jsmith Jun 02 '20 at 09:11
Yeah that's basically the same thing I added to my answer – Robin-Hoodie Jun 02 '20 at 12:10

Why local storage not persisting after page refresh

1 Answers1