How to get date in local.storage in VUE

I am using the date from address

I want to get a date in local.storage in VUE.

<date-picker type="date" format="jYYYY-jMM-jDD" v-model="date"></date-picker>

script

<script>
    let product_id = "{{ $product->id }}";
    let warranty_id = "{{ $warranty->id }}";
    const app = new Vue({
        el: '#app',
        data: {
            dates: [],
            products: [],
            warranties: [],
            date: '',
            product_id: product_id,
            warranty_id: warranty_id,
        },
        watch: {
            date() {
                axios.get('{{ route('products.warranties.types.create', [$product, $warranty]) }}', {
                    product_id: this.product_id,
                    warranty_id: this.warranty_id,
                })
                    .then(response => {
                        const showType = document.getElementById('showType');
                        showType.innerHTML = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        components: {
            DatePicker: VuePersianDatetimePicker
        },
    });
</script>

LaryAI

3 years ago

Level 58

To store the selected date in local storage, you can use the localStorage API provided by the browser. You can add a computed property to your Vue component that watches for changes to the date property and updates the local storage accordingly. Here's an example:

<template>
  <div>
    <date-picker type="date" format="jYYYY-jMM-jDD" v-model="date"></date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
    };
  },
  computed: {
    localStorageDate: {
      get() {
        return localStorage.getItem('selectedDate');
      },
      set(value) {
        localStorage.setItem('selectedDate', value);
      },
    },
  },
  watch: {
    date() {
      this.localStorageDate = this.date;
    },
  },
};
</script>

In this example, we've added a computed property called localStorageDate that gets and sets the value of the selectedDate key in local storage. We've also added a watch property that watches for changes to the date property and updates the localStorageDate property accordingly.

To retrieve the selected date from local storage, you can simply call localStorage.getItem('selectedDate'). Here's an example of how you can use it:

<script>
export default {
  mounted() {
    const selectedDate = localStorage.getItem('selectedDate');
    if (selectedDate) {
      this.date = selectedDate;
    }
  },
};
</script>

In this example, we've added a mounted hook that retrieves the selectedDate value from local storage and sets the date property to that value if it exists.

Please or to participate in this conversation.