vue本地存储

1.本地存储
本地存储不是vue创建的，js里面就有

1.1webStorage
1.2存储内容大小一般支5MB左右(不同浏览器可能还不一样)

⒉.浏览器端通过Window.sessionStorage和 Window.localStorage属性来实现本地存储机制。

3.相关API:

1.xxxxxStorage.setItem( " key ’ , 'value ’ ) ;

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2.xxxStorage.getItem( ’ person ’ );

该方法接受一个键名作为参数，返回键名对应的值。

3.xXXxxStorage.removeItem( ’ key ’ );

该方法接受一个键名作为参数，并把该键名从存储中删除。

4.xxxxxStorage.clear()

该方法会清空存储中的所有数据。

例子：

4.备注:

1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。

2.LocalStorage存储的内容，需要手动清除才会消失。

3.xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null。

4.JSON.parse(null)的结果依然是null。

2.组件的自定义事件
1.一种组件间通信的方式，适用于:子组件===>父组件

⒉使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件(事件的回调在A中)。

3.绑定自定义事件:

1.第一种方式，在父组件中: Demo@atguigu=“test”/或

2.第二种方式，在父组件中:

<Demo ref="demo" /> 
....... 
mounted()
{ this.$refs.xxx.$on( 'atguigu ' ,this.test)} }

3.若想让自定义事件只能触发一次，可以使用once修饰符，或 $once方法。

4.触发自定义事件:this.$emitt( 'atguigu ',数据)

5.解绑自定义事件this.$off( 'atguigu ')

6.组件上也可以绑定原生DOM事件，需要使用native修饰符。

7.注意:通过this.$refs.xx. son(‘atguigo’ ,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

3.全局引入
全局引入方法和局部引入类似，组件的写法与局部引入完全一样，仅仅是引入方式有所区别
1、写组件
方法同上
2、引入组件
局部引入组件是在需要使用组件的文件中单独引入，这种方法很常见，在日常使用中大多都是采用局部引入。
但对于某些使用很频繁的组件，如标题这样的可能会所有文件都会使用的组件，这样在每个文件都引入显得很是繁琐，且万一遇到需求改变，修改起来也是异常麻烦，所以全局引入在此时就显得很有必要了。

在日常使用中应该尽量避免使用全局引入，这会大大增加项目体积，在组件复用性不高的情况下，应该使用局部引入，只有在组件复用性非常高的时候才应该考虑使用全局引入。