Html中获取session中的值(实现登录后显示欢迎xxx)

        以前都是使用jsp进行前台界面的开发，可以直接使用session，获取用户信息，在整个生命周期中都可以展示出用户信息，第一次使用HTML进行前台界面的开发，因为welcomexx是在左侧每个选项卡界面中都有的，所以登录后需要将用户信息保存到一个缓存中，是每个页面都可以获取到用户信息。

在网上有很多说是用一个过渡的servlet，但是太麻烦了，经接触公司的另一个springboot项目，发现可以用JavaScript对象的Windows sessionStorage属性实现，具体如下所以：

登录页面：

       

<form enctype="multipart/form-data" method="post" action="/user/login">
    <div class="name">
        <label>用户名：</label>
        <input type="text" name="username" id="username" tabindex="1" autocomplete="off" />
    </div>
    <div class="password">
        <label>密 码：</label>
        <input type="password" name="password" maxlength="16" id="" tabindex="2" />
    </div>
    <div class="code">
        <label>验证码：</label>
        <input type="text" name="securityCode" maxlength="4" id="code" tabindex="3" />
        <div class="codeImg">
            <img src="<%=request.getContextPath()%>/login/radomImage.jsp" id="radomimg"/>
        </div>
    </div>
    <div class="remember">
        <input type="checkbox" id="remember" tabindex="4"> <label>记住密码</label>
    </div>
    <div class="login">
        <button id="btn-login-submit" type="submit" tabindex="5">登录</button>
    </div>
</form>

后台登录方法：

        

@ResponseBody
@RequestMapping("/login")
public ModelAndView login(HttpServletRequest request, HttpServletResponse response) {
    HttpSession session = request.getSession();
    ModelAndView mv = new ModelAndView();
    String loginNo = request.getParameter("username")+"";//登录工号
    String password = request.getParameter("password")+"";//登录密码
    String securityCode = (String)request.getParameter("securityCode");//输入的验证码
    String randomStr = (String)request.getSession().getAttribute("randomStr");//系统生成的验证码
    System.out.println(loginNo+password+securityCode+randomStr);
    /*if ("111".equals(loginNo)){
        return "pages/index.html";
    }else{
        return "redirect:/login/login.jsp";
    }*/
    List<User> lists =new ArrayList();
    User nameBean=new User("1","malz","malizhi");
    lists.add(nameBean);
    session.setAttribute("username", loginNo);
    mv.addObject("username",loginNo);
    mv.setViewName("pages/index.html");
    return mv;
}

主页面index.html:

        可以用以下方式获取到后台传参的值

<a class="btn account dropdown-toggle" data-toggle="dropdown" href="#">
   <div class="avatar"><img src="../img/avatar.jpg" alt="Avatar" /></div>
   <div class="user">
      <span class="hello">Welcome!</span>
      <span id="username" class="name" th:text="${username}"></span>
   </div>
</a>

然后在JavaScript中把值放到sessionStorage中，这样就可以在其他页面通过sessionStorage获取用户信息。

<script>
   sessionStorage.setItem('USER_NAME',document.getElementById("username").innerHTML);
</script>

如在报表界面chart.html：

获取到username的值显示在界面上，完美解决。

$(document).ready(function(){
    $("#username").text(sessionStorage.getItem('USER_NAME'));
})

<a class="btn account dropdown-toggle" data-toggle="dropdown" href="#">
   <div class="avatar"><img src="../img/avatar.jpg" alt="Avatar" /></div>
   <div class="user">
      <span class="hello">Welcome!</span>
      <span id="username" class="name"></span>
   </div>
</a>