localstorage和sessionStorage一起使用的坑

背景分析：1、项目中有投递简历后，发送至招聘者邮箱，此时招聘者从邮箱点击邮箱链接跳转至具体的简历详情页面。

　　　　　2、该简历详情页面需要登录后才能访问，而从邮箱点开的链接在没有登录的情况下，或者已登录的页面和打开邮箱链接的页面不在同一个浏览器时，默认只能跳转登录页面后再登录后才能正常访问。（使用 document.referrer可获得浏览器前一个url).

　　　　　3、目的：用户从邮箱点开简历链接时直接打开对应的简历页面，不要每次都需要登录。

　　　　　4、解决方案：给一个复选框，当用户登录时勾选【保持登录】时，即存localStorage（本项目中存储的是token）,然后在页面获取localStorage,若存在则用token继续获取用户信息再存一次sessionStorage。

　　　　　5、没有勾选一定要删除localStorage,且使用removeItem,使用setIteme无效。否则存储一次之后的localStorage一直存在，当不勾选这个【保持登录】时，会使用旧的token去获取登录信息，即永远无法登录成功，登录成功又返回登录页面。

 

核心代码：

  <div class="register-custom-box fn-clear margin-t-30 margin-l-10">
                                            <input type="checkbox" class="register-checked fn-left" id="keep">
                                            <label for="keep">保持登录</label>
                                        </div>


let keep = $("#keep1").prop('checked');
if(keep){
   localStorage.setItem('keepLogin',登录返回的token);
   } else {
   localStorage.removeItem('keepLogin'); //很重要，否则只要点一次就会被存起，且存起的token永远不变，获取的用户信息也是不对的。
   }

 

base_data.js （在需要登录才能访问的所有页面都引入，放在公共头部）

new Vue({
    el: '#header',
    data:{
        userInfo:{}
    },
    created() {
        this.initPage();
    },
    mounted() {
    },
    methods: {
        /*初始化页面数据*/
        initPage() {
            let _this = this;
            let keepLogin = localStorage.getItem('keepLogin');
            let _userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            if (keepLogin) {
                ajaxPost({token: keepLogin}, 'api?operate=normal.user.user_info', function (res) {
                    _this.userInfo = res.data;
                    sessionStorage.setItem('userInfo', JSON.stringify(res.data));
                }, function () {
                    console.log('获取用户信息失败');
                    location.href = "?page=login";
                });
            }else{
                if(_userInfo){
                    _this.userInfo = _userInfo; // 已经登录
                }else{
                    location.href = "?page=login"; // 登录失效的情况
                }
            }
        },

        /*退出登录*/
        Logout(){
            let _param = {
                token: this.userInfo.token
            }
            layer.open({
                title:"退出登录",
                content:'确定退出当前账号吗？',
                btn:['确定','取消'],
                yes:function (_index) {
                    layer.close(_index);
                    ajaxPost(_param,'api?operate=normal.user.logout',function (res) {
                        layer.msg(res.msg,{time: 2000});
                        sessionStorage.removeItem('userInfo') // 删除session
                        location.href = "?page=login";
                    },function (res) {
                        console.log('error',res);

                    })
                },
                btn2:function () {
                    layer.msg('取消退出',{time: 2000});
                }
            })

        }
    }
})