客戶的數(shù)據(jù)登錄信息一般保存在<form>標(biāo)簽中，我們只要監(jiān)聽其submit事件阀参，根據(jù)服務(wù)器返回的數(shù)據(jù)做出響應(yīng)并渲染給客戶就可以了浓恶。一般分四步
第一步：阻止submit的默認(rèn)提交行為
第二步：獲取form表單數(shù)據(jù)
第三步：發(fā)起ajax請求
第四步：根據(jù)返回?cái)?shù)據(jù)做出相應(yīng)動(dòng)作
示例是JQuery代碼，使用了serialize()函數(shù)快速獲取表單數(shù)據(jù)结笨，發(fā)起ajax請求，將返回的token存儲(chǔ)到window的localStorage中，并跳轉(zhuǎn)到登錄成功頁面炕吸。其中l(wèi)ayer對象來自于layui開發(fā)框架
.ajax({
url: '/api/login',
method:'post'
// 快速獲取表單中的數(shù)據(jù)
data: $(this).serialize(),
success: function (res) {
if (res.status !== 0) {
return layer.msg('登錄失敺ズ丁！')
}
layer.msg('登錄成功赫模！')
// 將登錄成功得到的 Token 字符串树肃，保存到 localStorage 中
localStorage.setItem('token', res.token)
// 跳轉(zhuǎn)到后臺(tái)主頁
location.href = '/index.html'
}
})
})
下面是關(guān)于localStorage的資料
localstorage 在瀏覽器的 API 有兩個(gè)：localStorage 和sessionStorage，存在于 window 對象中：localStorage 對應(yīng) window.localStorage瀑罗，sessionStorage 對應(yīng) window.sessionStorage胸嘴。
localStorage 和 sessionStorage 的區(qū)別主要是在于其生存期。
localStorage理論上來說是永久有效的斩祭，即不主動(dòng)清空的話就不會(huì)消失劣像，即使保存的數(shù)據(jù)超出了瀏覽器所規(guī)定的大小，也不會(huì)把舊數(shù)據(jù)清空而只會(huì)報(bào)錯(cuò)摧玫。但需要注意的是耳奕，在移動(dòng)設(shè)備上的瀏覽器或各Native App用到的WebView里，localStorage都是不可靠的诬像，可能會(huì)因?yàn)楦鞣N原因（比如說退出App屋群、網(wǎng)絡(luò)切換、內(nèi)存不足等原因）被清空坏挠。
sessionStorage的生存期顧名思義芍躏，類似于session，只要關(guān)閉瀏覽器（也包括瀏覽器的標(biāo)簽頁）降狠，就會(huì)被清空对竣。由于sessionStorage的生存期太短，因此應(yīng)用場景很有限喊熟，但從另一方面來看柏肪，不容易出現(xiàn)異常情況，比較可靠芥牌。
localstorage為標(biāo)準(zhǔn)的鍵值對（Key-Value,簡稱KV）數(shù)據(jù)類型烦味，簡單但也易擴(kuò)展，只要以某種編碼方式把想要存儲(chǔ)進(jìn)localstorage的對象給轉(zhuǎn)化成字符串壁拉，就能輕松支持谬俄。舉點(diǎn)例子：把對象轉(zhuǎn)換成json字符串，就能讓存儲(chǔ)對象了弃理；把圖片轉(zhuǎn)換成DataUrl（base64）溃论，就可以存儲(chǔ)圖片了。另外對于鍵值對數(shù)據(jù)類型來說痘昌，"鍵是唯一的"這個(gè)特性也是相當(dāng)重要的钥勋，重復(fù)以同一個(gè)鍵來賦值的話炬转，會(huì)覆蓋上次的值。
localStorage.setItem('myCat', 'Tom'); //碼片段訪問了當(dāng)前域名下的本地 [Storage]對象算灸，并通過 [Storage.setItem()]增加了一個(gè)數(shù)據(jù)項(xiàng)目扼劈。
let cat = localStorage.getItem('myCat');//獲取myCat的值
localStorage.removeItem('myCat'); //用于移除 localStorage 某項(xiàng)
localStorage.clear();// 移除所有l(wèi)ocalStorage中的數(shù)據(jù)
