如何解决html页面刷新后登陆信息丢失的问题

这是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" id="AX">
<input type="button" value="登陆" onclick="f()">
<div id="BX"></div>

<script>
    var user;
    function f(){
        if(document.getElementById("AX").value==="01"){
            user="01"
            document.getElementById("BX").innerHTML=user;
        }
    }
</script>

</body>
</html>

运行后出现一个输入框,一个登陆按钮。输入01后,点击按钮,出现“01”的字样。
但是,刷新页面后,字样消失。
如何让它不消失?

前端html页面把数据保存在localStorage对象中(localStorage对象中的数据在关闭网页后不会消失)。
重新打开页面后再从localStorage对象中取得数据,设置回页面上。
例子代码如下:(如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="AX">
<input type="button" value="登陆" onclick="f()">
<div id="BX"></div>
<script>
    var user;
    function f(){
        if(document.getElementById("AX").value==="01"){
            user="01"
            document.getElementById("BX").innerHTML=user;
            localStorage.user = user;
        }
    }
    window.onload = function () {
        user = localStorage.user;
        if(user){
            document.getElementById("BX").innerHTML=user;
        }
    }

</script>
</body>
</html>