存储方式和侦听器对象

一、cookie（储存在用户本地终端上的数据）

      一:使用场景:

      1:记住密码,下次自动登录。

      2:记录用户浏览数据,进行商品(广告)推荐。

      二:特点:

      1:cookie保存在浏览器端。

      2:单个cookie保存的数据不能超过4KB。

      3:cookie中的数据是以域名的形式进行区分的。

      4:cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

      5:cookie中的数据会随着请求被自动发送到服务器端。

      三缺点:

      由于cookie存储机制有很多缺点，HTML5不再使用它,转而使用改良后的WebStorage存储机制。

二、localStorage（本地储存）

       在HTML5中,新加入了一个localStorage特性,这个特性主要用来作为本地存储来使用。它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localStorage一般为5M。

localStorage的生命周期

       LocalStorage生命周期是永久，这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永久存在

localStorage的局限

        a.在IE8以上的IE版本才支持localstorage这个属性。

        b.目前所有的浏览器中都会被localStorage的值类型限定为string类型，

        对我们日常比较常见的JSON对象类型需要一个转换

判断浏览器是否支持localstorage这个属性

        if(window.localstorage){
        alert('浏览器支持localStorage')}

localstorage的写入

 if (!window.localStorage) {
            alert('浏览器不支持localStorage')
        }else{
            var stroragre = window.localStorage;
            //写入a字段
            Storage['a'] = 1;
            //写入b字段
            Storage['b'] = 2;
            //写入c字段
            Storage['c'] = 2;

            console.log(typeof storage['a']);//string
            console.log(typeof storage['b']);//string
            console.log(typeof storage['c']);//string
        }

三、SessionStorage（临时储存）

        SessionStorage的生命周期

        SessionStorage的生命周期为当前窗口或标签页 一旦窗口或标签页被永久关闭了，那么所有通过Session存储的数据也被清空了

四、对对象进行侦听

  <div id="app">
        <p>{{ obj.name }} --- {{ obj.age }} --- {{ obj.height }}</p >
        <button @click = "obj.name = 'rose'">修改obj的name属性</button>
        <button @click = "obj.age = 30">修改obj的age属性</button>
        <button @click = "obj = {name:'andy', age:99} ">修改obj的指向</button>
    </div>

    <script src="../vue.js"></script>

    <script>
        new Vue({
            el: '#app', 
            data:{
                obj:{
                  name: 'jack', 
                   age:16, 
                   height:175
                }
            },
            watch:{
            // 这种写法侦听不到obj对象内部属性的变化，
            // 只能侦听到obj对象指向的变化。
            // obj(){
            // console.log('obj变化了'); 
            // },
            // 如果想侦听到对象里属性的变化!
            // 侦听obj里name的变化(要记得加引号)// "obj.name"(){
            // console.log('name变化了'); 
            // },

            // 可是这样写只能侦听一个属性。
            // 如果希望侦听到对象里所有属性的变化,就要开启深度侦听。 
            obj:{
                // 当有变化会调用的函数 
                handler(){
                    console.log('obj的属性变化了');
                },

                // 开启深度侦听 
                deep:true,

                // 要不要当前页面一打开就立即调用handler函数。
                // 给true表示立即调用,默认是flase。(代表只有改动了才调用) 
                immediate:true

            }
         }
    })
</script>