电话查询系统review笔记

1.关于.sync的使用：

项目中涉及很多弹窗，按照之前的写法，需要给弹窗组件传递一个visible的props以及改变这个弹窗状态的函数function,实际上可以通过.sync来简化操作:

//父组件按钮
<template>
    <div>
        <input type="button"
               value="父组件Btn"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>

子组件：

//子组件
<template>
    <div>
         王侯将相宁有种乎！
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

2.dialog的visible属性的问题:

尤其是在需要用到生命周期发送请求的时候，需要添加v-if

3.登录中对于cookie和缓存的处理：

    setCookie(name, value, days) {
      var d = new Date();
      d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
      var expires = "expires=" + d.toUTCString();
      document.cookie = name + "=" + value + "; " + expires;
    },
    getCookie(key) {
      var strcookie = document.cookie;
      var arrcookie = strcookie.split("; ");
      for (var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] == key) {
          return arr[1];
        }
      }
      return "";
    },

然后是说下对于sessionstorage，和localstorage的区别:

• localStorage:生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
• sessionStorage:生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。