使用LocalStorage记住用户登录信息

1、
随着HTML5规范的普及,我们不再用cookie来实现记住密码,通常会用的LocalStorage 及本地缓存。
对于Cookie来说它只有一个document.cookie这一个API可以使用,不管是读取Cookie还是存储Cookie你都只能使用它
然而LocalStorage,你存储的时候有localStorage.setItem(),你读取的时候有localStorage.getItem(),你想要删除的时候有localStorage.removeItem().此外在存储时,它们事以键值对的形式存储的.所以更易于使用.并且localStorge的储存空间大,有5M,并且是永久储存,除非你主动删除。
2、今天刚好在移动端的Vue项目中使用到了LocalStorage去记住用户的登录信息。
只是一个例子,并不是很完整,在使用axios请求验证登录信息时用到:

loginBtnClick() {
            // 判断当前是否校验通过
            if (this.erros.any()) {
                console.log("有错误");
                return;
            }
            console.log("没有错误");
            // 发送ajax请求  axios  
            // 使用MintUI  
            Indicator.open("正在登陆.......");
            // setTimeout(() => {
            //     Indicator.close();
            // }, 2000);
            axios.post('/login',{
                CNO: this.CNO,
                PNO: this.PNO,
                Password: this.Password
             }).then(res => {
                 if (res.data.code == 1) {
                    //  登陆成功  记住用户密码
                    localStorage.setItem("Login_data", JSON.stringfy({
                        remenber: this.remenber,
                        autologin: this.autologin,
                        PNO: this.remenber ? this.PNO : "",
                        CNO: this.remenber ? this.PNO : "",
                        Password: this.remenber ? this.Password : "",
                    }));
                     this.$router.push("/home");
                 } else {

                 }
                 Indicator.close();
             })
             .catch(e => {
                 Toast({
                     message: "",

                 })
                 Indicator.close();
             })
        }

3、在使用时特意去关注了一下本地存储的安全性,证明这种存储不是安全的。
节选----从远程攻击来看localStorage存储的数据容易被XSS攻击获取,所以不宜把身份验证信息或敏感信息用localStorage存储。而从本地攻击角度来说,从localStorage自身的存储方式和存储时效来看也不宜存储敏感信息。

五大浏览器现在都已经支持以localStorage方式进行存储,其中Chrome,Opera,Safari这三款浏览器中都有了查看本地存储的功能模块。
————————————————

发布了75 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_45416217/article/details/102938844