客户的数据登录信息一般保存在<form>标签中，我们只要监听其submit事件，根据服务器返回的数据做出响应并渲染给客户就可以了。一般分四步
第一步：阻止submit的默认提交行为
第二步：获取form表单数据
第三步：发起ajax请求
第四步：根据返回数据做出相应动作
示例是JQuery代码，使用了serialize()函数快速获取表单数据，发起ajax请求，将返回的token存储到window的localStorage中，并跳转到登录成功页面。其中layer对象来自于layui开发框架
.ajax({
url: '/api/login',
method:'post'
// 快速获取表单中的数据
data: $(this).serialize(),
success: function (res) {
if (res.status !== 0) {
return layer.msg('登录失败！')
}
layer.msg('登录成功！')
// 将登录成功得到的 Token 字符串，保存到 localStorage 中
localStorage.setItem('token', res.token)
// 跳转到后台主页
location.href = '/index.html'
}
})
})
下面是关于localStorage的资料
localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。
localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。
sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。
localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。
localStorage.setItem('myCat', 'Tom'); //码片段访问了当前域名下的本地 [Storage]对象，并通过 [Storage.setItem()]增加了一个数据项目。
let cat = localStorage.getItem('myCat');//获取myCat的值
localStorage.removeItem('myCat'); //用于移除 localStorage 某项
localStorage.clear();// 移除所有localStorage中的数据
