今天實現一個功能,點擊首頁,頭部按鈕,切換大屏功能。不同的屏,頁頭寬度不一樣,小屏1280px, 大屏百分百屏幕,左右留點120px的padding值。
思路:點擊按鈕,切換不同的子路由,頂部通過一個值,控制頭部樣式。刷新頁面,頭部要和路由相對應。關閉頁面。默認進首頁。這時,我想到用sessionStorage 。
- 關閉瀏覽器sessionStorage 失效;
- 頁面刷新不會消除數據;
但是,當 localstorage 或 sessionstorage 存儲布爾值
數據時,取到的數據變成了字符串'true' 'false',
建議在存儲該類型數據時將 value 設置為 0、1,取值時用Number(localstorage.getItem('key'))
,再進行后續判斷操作。
相關代碼:
template結構:
vuex代碼:
data,computed定義獲取數值:
點按鈕,切換界面。
localstorage,sessionstorage 存取數據方式:
存儲字符、數字、布爾值等
存:localstorage.setItem('key', key-value); 取:localstorage.getItem('key');
存儲對象
存:localstorage.setItem("key", JSON.stringift(key-value)); 取:JSON.parse(localstorage.getItem('key'));