如何记住此 BootstrapVue table 的输入字段内容？

Question

我下面有一个 BootstrapVue table；

这是代码，感谢这个 ;

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/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

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

基本上，输入表单用于过滤目的。

如何记住这个输入框使用过的内容，以便用户关闭页面，下次打开页面时，自动加载这个过滤输入框过去的内容？ cookie 是最直接的方式吗？我愿意接受任何实现此内存功能的方法。

我正在使用 BootstrapVue，vue.js2.6

Answer 1

您可以使用 window.localStorage，并将其绑定到您的过滤器输入。

例如：

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

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

Answer 2

为了完整起见，我会post根据@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/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

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

如何记住此 BootstrapVue table 的输入字段内容？

How to remember input field contents for this BootstrapVue table?

javascript

vue.js

cookies

bootstrap-vue