a week of review02

 <!-- 特点：1）保存在浏览器中

         2）存储数据不超过4kb

         3）内部数据以域名进行区分

         4）存储的数据有一定的存储时间

         5)内部数据会根据请求发送到服务器端口 -->

         

 Cookie 的生命周期
cookie有2种存储方式，一种是会话性，一种是持久性。

会话性：如果cookie为会话性，那么cookie仅会保存在客户端的内存中，当我们关闭客服端时cookie也就失效了
持久性：如果cookie为持久性，那么cookie会保存在用户的硬盘中，直至生存期结束或者用户主动将其销毁。
cookie我们是可以进行设置的，我们可以人为设置cookie的有效时间，什么时候创建，什么时候销毁。
 

 一般情况下，cookie是以键值对进行表示的(key-value)的字符串。

// localStorage这个是永久存储的,这个存储空间为5m
        // 生命周期为永久,除非在浏览器提供的ui上清除，否则将永久存在，
        // 目前本地存储只支持string类型
//         if (window.localStorage) {
// alert(浏览器支持)    
// }
if (!window.localStorage) {
alert(浏览器不支持)    
}else{
    var storage = window.localStorage;
    // 写入字段的三种方式
    storage['a'] =1;
    storage.b = 2;
    storage.setItem('c',3);
    console.log(typeof storage['a']);
    console.log(typeof storage['b']);
    console.log(typeof storage['c']);
}

 计算属性：

模板：与data同级

  computed:{
                计算属性名(){
                    return 结果
                }
            }

、什么是计算属性

• 写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用
• get()：必须要写，该函数不接受参数
  get()什么时候被调用?：当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
  set()：可选项，接受一个可选参数（计算属性被修改之后的值）
  set()什么时候被调用?： 当计算属性被修改时被调用
  get()和 set()中出现的this执向vm

  
      <div id="root">
      性：<input type="text" v-model="lastName"></input><br><br>
      名：<input type="text" v-model="firstName"></input><br><br>
      全名：<span>{{fullName}}</span>
      <button @click="btn">更变值</button>
      </div>
  
      <script>
      new Vue({
          el:'#root',
          data(){
              return{
          firstName:'万物不及你',
          lastName:'喜欢你',
              }
          },
          computed:{
              fullName :{
                     get(){
                      return this.firstName + '-' +this.lastName;
                     },
                     set(value){
                      console.log('set',value);
                      const arr = value.spilt('-');
                      this.firstName =arr[0];
                      this.lastName =arr[1];
                     },
                    
              }
             
          },
          methods:{
                            btn(){
                              this.fullName ='我们之间的距离-好像忽远又忽近';
                            }
                     }
      })