vue sessionStorage存值取值問題

定義和使用

localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。

sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據,在關閉窗口或標籤頁之後將會刪除這些數據。

保存數據語法:

sessionStorage.setItem("key", "value");

讀取數據語法:

var lastname = sessionStorage.getItem("key");
功能要求:

1:在調用登錄接口的時候,請求登錄接口成功,登錄系統,將獲取到的Response裏面的返回值存到瀏覽器

2:在使用某個組件的時候,例如使用test.vue的時候,需要獲取到瀏覽器裏面存的值,拿出來使用。

步驟
1:我這裏使用的是vue-element-admin後臺管理系統的框架,打開登錄界面login.vue,查看登錄接口調用的位置的代碼,可以看到,請求成功之後,要求將以下返回值的數據都保存起來。

//存起來
sessionStorage.setItem("userInfo", JSON.stringify(res.data))

這個時候,可以打開瀏覽器,查看數據有沒有保存在瀏覽器裏面,選擇Application,點擊session Storage,可以看到login登錄接口的返回值已經存儲到瀏覽器了,接下來就從瀏覽器取值了。


2:獲取
打開test.vue組件,在需要使用到返回值的位置寫獲取sessionStorage值的代碼

//取出來sessionStorage的值
const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))   

debugger看一下,這裏就獲取到值了


接下來,就可以將獲取到的值,賦值給所需要的參數了~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章