Question

我要插入一个小吃栏，想知道它是否有办法让使用浏览器缓存的用户只出现一次。

这是我到目前为止所得到的。

<template>
  <v-card>
    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'right'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
    >
      <router-link :to="rota" @click="snackbar = false" id="snackbarTexto"
        ><span>{{ text }}</span></router-link
      >
      <v-btn id="btnSnackbar" flat @click="snackbar = false">
        Fechar
      </v-btn>
    </v-snackbar>
  </v-card>
</template>

new Vue({
  el: '#app',
  data () {
   return {
      snackbar: true,
      y: "top",
      x: null,
      mode: "",
      timeout: 0,
      text: "Clique aqui para preencher a avaliação do módulo",
      rota: "/avaliacao_modulo"
    };
  }
})

https://codepen.io/anon/pen/OGwzGG

谢谢。

Answer 1

我建议使用js-cookie之类的库来存储cookie，该cookie表示用户是否已经看到了快餐栏消息。

我不确定您使用的是哪种类型的构建系统，或者您是否使用的是node / npm。您将必须导入某种类型的cookie库，或者通过香草JavaScript自己管理cookie。

我还把抽象部分留给了你。如果以后要实现任何新类型的消息，请确保此更改易于更改。我希望这会有所帮助！

<template>
    <v-card>
        <v-snackbar v-model="showSnackbar"
                    :bottom="y === 'bottom'"
                    :left="x === 'left'"
                    :multi-line="mode === 'multi-line'"
                    :right="x === 'right'"
                    :timeout="timeout"
                    :top="y === 'top'"
                    :vertical="mode === 'vertical'">
            <router-link :to="rota" @click="showSnackbar = false" id="snackbarTexto">
                <span>{{ text }}</span>
            </router-link>

            <v-btn id="btnSnackbar" flat @click="showSnackbar = false">
                Fechar
            </v-btn>
        </v-snackbar>
    </v-card>
</template>

// Import js-cookie
// https://www.npmjs.com/package/js-cookie
import cookie from 'js-cookie';

new Vue({
    el: '#app',
    data () {
        return {
            // Set to false initially
            showSnackbar: false,

            y: "top",
            x: null,
            mode: "",
            timeout: 0,
            text: "Clique aqui para preencher a avaliação do módulo",
            rota: "/avaliacao_modulo"
        };
    },

    created() {
        // Give the snackbar cookie a name
        let cookieName = 'snackbar';

        // Check browser cookies for a snackbar cookie
        let snackbarCookie = cookie.get(cookieName);

        // If we have no cookie
        if (!snackbarCookie) {
            // Set a cookie so the snackbar doesn't come up again
            cookie.set(cookieName, true);

            // Show the snackbar
            this.showSnackbar = true;
        }
    },
});

Answer 2

简单的解决方案是使用 LocalStorage 在客户端上保存点心栏数据。

1。首次创建组件时，请获取存储在localStorage中的 mySnackbarValue 的值，并将其设置为我们组件数据中 snackbar 的值（如果存在） localStorage。

created(){
    if (localStorage.getItem('mySnackbarValue')) this.snackbar = JSON.parse(localStorage.getItem('mySnackbarValue'));
}

注意：：由于 LocalStorage 仅存储字符串，因此JSON.parse(localStorage.getItem('mySnackbarValue'));会解析回布尔值。

2。现在，当组件数据的 snackbar 值通过使用watch更改时，我们需要在localStorage中设置 mySnackbarValue 的值。

watch:{
    snackbar:{
        handler(){
            localStorage.setItem('mySnackbarValue', this.snackbar);
        },
    },
}

默认情况下，数据组件中的

3. 快餐栏设置为true。

new Vue({
  el: '#app',
  data () {
   return {
      snackbar: true
    };
  }
})

完整的代码如下：

<template>
  <v-card>
    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'right'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
    >
      <router-link :to="rota" @click="snackbar = false" id="snackbarTexto"
        ><span>{{ text }}</span></router-link
      >
      <v-btn id="btnSnackbar" flat @click="snackbar = false">
        Fechar
      </v-btn>
    </v-snackbar>
  </v-card>
</template>

new Vue({
  el: '#app',
  data () {
   return {
      snackbar: true,
      y: "top",
      x: null,
      mode: "",
      timeout: 0,
      text: "Clique aqui para preencher a avaliação do módulo",
      rota: "/avaliacao_modulo"
    };
  },
  watch: {
    snackbar: {
      handler() {
        localStorage.setItem('mySnackbarValue', this.snackbar);
      },    
    },
  },
  created(){
   if (localStorage.getItem('mySnackbarValue')) this.snackbar = JSON.parse(localStorage.getItem('mySnackbarValue'));
  }
})

有一种方法可以使小吃店打开一次？

2 个答案: