a week of review02-优快云博客

本文介绍了Cookie的两种存储方式及其生命周期，并对比了LocalStorage的特点。探讨了如何设置Cookie的有效时间及LocalStorage的永久存储特性，同时展示了计算属性在Vue.js中的使用。

<!-- 特点：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 ='我们之间的距离-好像忽远又忽近';
                          }
                   }
    })