How to remember input field contents for this BootstrapVue table?-CodePudding

I have a BootstrapVue table below;

Here is the code, thanks to this answer;

new Vue({
  el: '#app',
  data() {
    return {
      filter: '',
      items: [
        { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
        { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
        { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
        { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
        { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" >
  <b-input v-model="filter" placeholder="Filter table.."></b-input>
  <hr />
  <b-table :items="items" :fields="fields" :filter="filter">
  </b-table>
</div>

Basically, the input form is used for filtering purposes.

How can the contents used in this input form be remembered so that if the user closes the page and opens the page next time, the past contents for this filter input form can be loaded automatically? Are cookies the most straightforward way to do it? I am open to any way to implement this memory feature.

I am using BootstrapVue, vue.js 2.6

CodePudding user response：

You can use window.localStorage, and bind it to your filter input.

For example:

data: () => ({
  filter: localStorage.getItem('searchValue') || '',
}),
watch: {
  filter() {
    localStorage.setItem('searchValue', this.filter)
  }
}

<b-input v-model="filter" placeholder="Filter table.."></b-input>

CodePudding user response：

For the sake of completion, I will post the complete code based on the answer from @lissy93

new Vue({
  el: '#app',
  data() {
    return {
      //save filter string into local storage
      filter: localStorage.getItem('searchValue') || '',
      items: [
        { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
        { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
        { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
        { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
        { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
      ]
    }
  }
  watch: {
    filter() {
      //retrieve saved filter string from localStorage
      localStorage.setItem('searchValue', this.filter)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" >
  <b-input v-model="filter" placeholder="Filter table.."></b-input>
  <hr />
  <b-table :items="items" :fields="fields" :filter="filter">
  </b-table>
</div>