储存器sessionStorage和localStorage

上一章：Vue传参总结
前言
        今天遇到了一个传递参数的问题，如果不使用vue的性质传参，那么参数应该如何传递，也就是说不用props、vue-router、vuex，那么参数应该如何传递。面对这个问题，今天得到了答案。
        我们可以使用临时储存和长期储存的方式来达到值传递的效果。

•         sessionStorage：临时储存， 在浏览器打开期间即页面关闭之前，包括页面刷新重新加载，里面的数据依然存在。即只要不关闭会话，数据就一直存在。
•         localStorage：长期储存，与sessionStorage基本一样，但是页面关闭后，数据会一直存在。
          所以要合理使用储存器

使用方法

        这里我将sessionStorage和localStorage使用方法写到一起，因为他俩的使用基本一样。这里简单介绍了一下增、删、查、改，后续遇到定期清除储存器，我会继续添加其使用方法。
        但是需要注意的是，setItem的参数类型。如下：

export default{
	name:'home',
	data(){
		return{
			userData:{username:'小丸子',id:666,age:18}	
		}
	},
	methods:{
		setData(){
			//setItem参数类型
			//第一个参数：key：String 
			//第二个参数：value：String
			sessionStroage.setItem('id','666');
			localStorage.setItem('name','小丸子');
			//既然都是String类型，那么如果需要传入对象即json时该如何传递呢
			//将JSON对象转换为字符串，获取时再转换回来即可
			sessionStorage.setItem('userData',JSON.stringify(this.userData));
			localStorage.setItem('userData',JSON.stringify(this.userData));
		}
		getData(){
			//getItem  获取数据
			//直接根据参数名来获取即绑定的key值
			sessionStorage.getItem('id');
			localStorage.getItem('name');
			//获取JSON字符串对象
			let userData1;
			//将JSON字符串转换为JSON对象，从而可以使用对象的属性
			userData1=JSON.parse(sessionStorage.getItem('userData'));
			let userData2;
			userData2=JSON.parse(localStorage.getItem('userData'));
		},
		clearData(){
			//删除某个数据
			sessionStorage.removeItem('id');
			localStorage.removeItem('name');
			//清除所有数据
			sessionStorage.clear();
			localStorage.clear();	
		},
		updata(){
			//修改某个数据
			sessionStorage.id='777';
			localStorage.name='大丸子'
		}
		
	}
}