前端使用localStorage颂跨、sessionStorage存儲(chǔ)方法大家都不陌生了，今天主要記錄下localStorage在vue項(xiàng)目中的存儲(chǔ)使用方法。
- 區(qū)別：
localStorage是本地存儲(chǔ)，永久保存臼疫，除非主動(dòng)刪除；sessionStorage是會(huì)話存儲(chǔ)扣孟，臨時(shí)保存烫堤，并且它們只能存儲(chǔ)字符串類型，對(duì)于復(fù)雜的對(duì)象可以使用JSON.stringify和JSON.parse來處理哈打。 - 應(yīng)用場(chǎng)景：
localStorage、sessionStorage主要用于不同頁(yè)面之間的傳值讯壶。 - 存儲(chǔ)有效時(shí)間：
當(dāng)刷新頁(yè)面(指F5刷新料仗，屬于清除內(nèi)存了)時(shí)，vuex存儲(chǔ)的值會(huì)丟失伏蚊，sessionStorage頁(yè)面關(guān)閉后就清除了立轧，localStorage不會(huì)，除非主動(dòng)刪除躏吊，所以我們需要根據(jù)的不同的需求決定是采用LocalStorage氛改，還是SessionStorage保存數(shù)據(jù)。 - 注：很多人誤認(rèn)為localStorage可以代替vuex比伏，對(duì)于不變的數(shù)據(jù)確實(shí)可以胜卤，但是當(dāng)兩個(gè)組件共用一個(gè)數(shù)據(jù)源(對(duì)象或數(shù)組)時(shí)，如果其中一個(gè)組件改變了該數(shù)據(jù)源赁项，希望另一個(gè)級(jí)件響應(yīng)該變化時(shí)葛躏，localStorage、sessionStorage無法做到悠菜，原因就是在于它們的區(qū)別舰攒。
第一種：
返回json格式
直接從后臺(tái)返回的對(duì)象中獲取鍵值，這樣最方便快捷悔醋，在調(diào)用時(shí)可直接調(diào)用摩窃，但當(dāng)項(xiàng)目中定義的字符串變理太多時(shí)，容易混亂
loginClick() {
var param = {
UserName: this.form.username,
UserPwd: this.form.password,
};
apiGetLogin(qs.stringify(param)).then( (response) => {
if (response.data.Code == 200) {
//存儲(chǔ)用戶信息
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);
}
})
}
//在調(diào)用時(shí)可直接調(diào)用
var params = {
staffId: window.localStorage.getItem('staffid')
};
第二種：
結(jié)合第一種芬骄，第二種保存返回的整個(gè)對(duì)象猾愿，不需要把整個(gè)對(duì)象里的每個(gè)值都拿出來保存一次
loginClick() {
var param = {
UserName: this.form.username,
UserPwd: this.form.password,
};
apiGetLogin(qs.stringify(param)).then( (response) => {
if (response.data.Code == 200) {
//存儲(chǔ)用戶信息
var userInfo = response.data.Result;
//把返回的對(duì)象轉(zhuǎn)換為字符串，因?yàn)閘ocalstore是以字符串存文件的账阻，直接存?zhèn)€對(duì)象識(shí)別不了匪蟀，所以要先把對(duì)象轉(zhuǎn)成json字符串
window.localStorage.setItem('result',JSON.stringify(userInfo));
this.$router.push({ name: 'Home' });
this.$message.success('登錄成功');
} else {
this.$message.error(response.data.Message);
}
})
}
//獲取的時(shí)候，要先獲取json字符串宰僧，再parse成json對(duì)象
var uInfo = JSON.parse(window.localStorage.getItem('userInfo'));
var useToken = uInfo.token;
第三種：
與第二種的區(qū)別在于自己構(gòu)建了一個(gè)json材彪，其它使用方法一樣观挎，雖然有點(diǎn)麻煩，但能方便快速取鍵值
loginClick() {
var param = {
UserName: this.form.username,
UserPwd: this.form.password,
};
apiGetLogin(qs.stringify(param)).then( (response) => {
if (response.data.Code == 200) {
//存儲(chǔ)用戶信息
var result = response.data.Result;
//方便快速取值
var userInfo = {
staffid: result.staffid,
hrCompanyId: result.hrCompanyId,
token: result.token,
};
//把返回的對(duì)象轉(zhuǎn)換為字符串段化，因?yàn)閘ocalstore是以字符串存文件的嘁捷，直接存?zhèn)€對(duì)象識(shí)別不了，所以要先把對(duì)象轉(zhuǎn)成json字符串
window.localStorage.setItem('userInfo',JSON.stringify(userInfo));
this.$router.push({ name: 'Home' });
this.$message.success('登錄成功');
} else {
this.$message.error(response.data.Message);
}
})
}
//獲取的時(shí)候显熏，要先獲取json字符串雄嚣，再parse成json對(duì)象
var uInfo = JSON.parse(window.localStorage.getItem('userInfo'));
var useToken = uInfo.token;
往數(shù)組里push字符：
因?yàn)閘ocalStorage中只接收字符串，所以往數(shù)組里push時(shí)喘蟆，也要轉(zhuǎn)換缓升。
// 往數(shù)組里存儲(chǔ)時(shí)，也要轉(zhuǎn)換為字符串
historyCityList = [];
//存儲(chǔ)時(shí)轉(zhuǎn)換為字符串存儲(chǔ)蕴轨，不然存儲(chǔ)進(jìn)去它會(huì)改變你原始定義的類型港谊，把數(shù)組改變?yōu)閷?duì)象object
window.localStorage.setItem("historyCityList",JSON.stringify(this.historyCityList))
//獲取時(shí)用再轉(zhuǎn)換為數(shù)組顯示
this.historyCityList = JSON.parse(window.localStorage.getItem("historyCityList"));
存儲(chǔ)時(shí)沒轉(zhuǎn)換改變?cè)级x類型
最后，sessionStorage的使用跟localStorage一樣橙弱，只要把上面的localStore換成sessionStorage就可以歧寺。需要注意的是，如果我們數(shù)據(jù)是保存到sessionStorage中的棘脐，那只能通過sessionStorage獲刃笨稹；如果我們數(shù)據(jù)是存到localStorage蛀缝，那就只能通過localStorage獲取顷链。
