上一章: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='大丸子'
}
}
}