前端使用localStorage、sessionStorage存储方法大家都不陌生了，今天主要记录下localStorage在vue项目中的存储使用方法。
- 区别：
localStorage是本地存储，永久保存，除非主动删除；sessionStorage是会话存储，临时保存，并且它们只能存储字符串类型，对于复杂的对象可以使用JSON.stringify和JSON.parse来处理。 - 应用场景：
localStorage、sessionStorage主要用于不同页面之间的传值。 - 存储有效时间：
当刷新页面(指F5刷新，属于清除内存了)时，vuex存储的值会丢失，sessionStorage页面关闭后就清除了，localStorage不会，除非主动删除，所以我们需要根据的不同的需求决定是采用LocalStorage，还是SessionStorage保存数据。 - 注：很多人误认为localStorage可以代替vuex，对于不变的数据确实可以，但是当两个组件共用一个数据源(对象或数组)时，如果其中一个组件改变了该数据源，希望另一个级件响应该变化时，localStorage、sessionStorage无法做到，原因就是在于它们的区别。
第一种：
返回json格式
直接从后台返回的对象中获取键值，这样最方便快捷，在调用时可直接调用，但当项目中定义的字符串变理太多时，容易混乱
loginClick() {
var param = {
UserName: this.form.username,
UserPwd: this.form.password,
};
apiGetLogin(qs.stringify(param)).then( (response) => {
if (response.data.Code == 200) {
//存储用户信息
var hrCompanyId = response.data.Result.hrCompanyId;
window.localStorage.setItem('hrCompanyId',hrCompanyId);
var staffid = response.data.Result.staffid;
window.localStorage.setItem('staffid',staffid);
this.$router.push({ name: 'Home' });
this.$message.success('登录成功');
} else {
this.$message.error(response.data.Message);
}
})
}
//在调用时可直接调用
var params = {
staffId: window.localStorage.getItem('staffid')
};
第二种：
结合第一种，第二种保存返回的整个对象，不需要把整个对象里的每个值都拿出来保存一次
loginClick() {
var param = {
UserName: this.form.username,
UserPwd: this.form.password,
};
apiGetLogin(qs.stringify(param)).then( (response) => {
if (response.data.Code == 200) {
//存储用户信息
var userInfo = response.data.Result;
//把返回的对象转换为字符串，因为localstore是以字符串存文件的，直接存个对象识别不了，所以要先把对象转成json字符串
window.localStorage.setItem('result',JSON.stringify(userInfo));
this.$router.push({ name: 'Home' });
this.$message.success('登录成功');
} else {
this.$message.error(response.data.Message);
}
})
}
//获取的时候，要先获取json字符串，再parse成json对象
var uInfo = JSON.parse(window.localStorage.getItem('userInfo'));
var useToken = uInfo.token;
第三种：
与第二种的区别在于自己构建了一个json，其它使用方法一样，虽然有点麻烦，但能方便快速取键值
loginClick() {
var param = {
UserName: this.form.username,
UserPwd: this.form.password,
};
apiGetLogin(qs.stringify(param)).then( (response) => {
if (response.data.Code == 200) {
//存储用户信息
var result = response.data.Result;
//方便快速取值
var userInfo = {
staffid: result.staffid,
hrCompanyId: result.hrCompanyId,
token: result.token,
};
//把返回的对象转换为字符串，因为localstore是以字符串存文件的，直接存个对象识别不了，所以要先把对象转成json字符串
window.localStorage.setItem('userInfo',JSON.stringify(userInfo));
this.$router.push({ name: 'Home' });
this.$message.success('登录成功');
} else {
this.$message.error(response.data.Message);
}
})
}
//获取的时候，要先获取json字符串，再parse成json对象
var uInfo = JSON.parse(window.localStorage.getItem('userInfo'));
var useToken = uInfo.token;
往数组里push字符：
因为localStorage中只接收字符串，所以往数组里push时，也要转换。
// 往数组里存储时，也要转换为字符串
historyCityList = [];
//存储时转换为字符串存储，不然存储进去它会改变你原始定义的类型，把数组改变为对象object
window.localStorage.setItem("historyCityList",JSON.stringify(this.historyCityList))
//获取时用再转换为数组显示
this.historyCityList = JSON.parse(window.localStorage.getItem("historyCityList"));
存储时没转换改变原始定义类型
最后，sessionStorage的使用跟localStorage一样，只要把上面的localStore换成sessionStorage就可以。需要注意的是，如果我们数据是保存到sessionStorage中的，那只能通过sessionStorage获取；如果我们数据是存到localStorage，那就只能通过localStorage获取。
网友评论