1)localStorage簡介
對瀏覽器來說赐劣，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀蛉迹，而且容量更大，它包含兩種：localStorage 和 sessionStorage
sessionStorage（臨時存儲） ：為每一個數(shù)據(jù)源維持一個存儲區(qū)域哀峻，在瀏覽器打開期間存在呈枉，包括頁面重新加載
localStorage（長期存儲） ：與 sessionStorage 一樣，但是瀏覽器關(guān)閉后堪侯，數(shù)據(jù)依然會一直存在
2) 保存數(shù)據(jù)到本地
const info = {
name: 'Lee',
age: 20,
id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));
3)從本地存儲獲取數(shù)據(jù)
var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));
4)本地存儲中刪除某個保存的數(shù)據(jù)
sessionStorage.removeItem('key');
localStorage.removeItem('key');
5)對setItem 以及getItem方法進(jìn)行封裝
//localStroage
const store= {
save(key,value){ //數(shù)據(jù)保存的方法
localStroage.setItem(key,JSON.stringify(value));
},
fetch(key){ //數(shù)據(jù)獲取的方法
return JSON.parse(localStroage.getItem(key))
}
}
//方法調(diào)用
store.save('localStroage',{
title:'初識localStorage'
})
console.log(store.fetch('localStroage'))
6）在瀏覽器中數(shù)據(jù)的查看
image.png
7）localStroage實戰(zhàn)
localStroage最常用的地方是在登錄的時候 記錄用戶登錄狀態(tài)
或者說登錄之后的后端接口都需要帶上用戶令牌才能訪問接口(token)
場景1嚎尤、 調(diào)用登錄接口，當(dāng)后端放回登錄成功后抖格，此時需要把用戶令牌token存儲
場景2诺苹、當(dāng)用戶操作時檢測當(dāng)前的時間，如果當(dāng)前的時間超過擬定的時間 就把登錄信息清空雹拄，并返回登錄頁面
//@ outTimer是超過的時間(半小時)
let config = {
loginTitle : '標(biāo)記取名',
timer : '實戰(zhàn)時間取名',
outTimer : 1000*60*30
}
let getSession = {
setLogin(data){
//設(shè)置localStroage
var token = data.token ? data.token : null;
var name = data.name ? data.name : null;
localStorage.setItem(config.loginTitle,JSON.stringify({
token : token, //保存token
name : name //保存 用戶名
}))
},
getLogin(){
let use = localStorage.getItem(config.loginTitle )
return use ? JSON.parse(use) : null
},
setTimer(){
let time = +new Date()
//+new Date()轉(zhuǎn)換時間戳 或者getTime()
localStorage.setItem(config.timer,time)
},
getTimer(){
return localStorage.getItem(config.timer)
},
isLogin(){
//判斷是否登錄
let use = getLogin();
if(!use)
return false
let nowTime = +new Date()
let timerStramp = getTimer()
if( nowTime + config.outTimer <= timerStramp)
return true
return false
},
clear(){
//清除localStorage
localStorage.removeItem(config.loginTitle);
localStorage.removeItem(config.timer);
}
}
export default getSession
