localstorage缓存

localstorage缓存

localstorage
生命周期永久，除非用户清除浏览器中的localStorage信息，否则永远存在；
存放数据大小一般为5MB；
仅在浏览器中保存，不参与服务器通信；

Api调用：

 localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
 localStorage.getItem("key");//获取名称为“key”的值
 localStorage.removeItem("key");//删除名称为“key”的信息。
 localStorage.clear();//清空localStorage中所有信息

admin页：

<div class="text-center">
        <button type="button" class="loginbtn">登录</button>
        <div class="user" style="display: none;">
            <div id="userName"></div>
            <button type="button" class="exit">退出</button>
        </div>
    </div>
    <script>
        console.log(localStorage.getItem('userName'));

        if (localStorage.getItem('userName') != null) {
            $('#userName').text(localStorage.getItem('userName'));
            $('.user').show();
            $('.loginbtn').hide();
        }
        $('.loginbtn').click(function () {
            window.location.href = '/264.snipet.block.dhtml'
        })
        $('.exit').click(function () {
            localStorage.clear();
            window.location.reload();
        })


        if (localStorage.getItem('userName')!=null){
            $('#userName').text(localStorage.getItem('userName'));
            $('.user').show();
            $('.loginbtn').hide();
        }
        $('.loginbtn').click(function(){
            window.location.href=''
        })
        $('.exit').click(function(){
            localStorage.clear();
            window.location.reload();
        })
    </script>

登录页：

<style>
        .form {
            width: 400px;
            margin: 0 auto;
        }

        .input-group {
            margin: 30px 0 0;
        }

        .btn {
            margin: 30px 0 0;
        }
    </style>
    <div class="form text-center">
        <div class="input-group">
            <span class="input-group-addon">用户名</span>
            <input type="text" id="username" class="form-control" placeholder="Username">
        </div>
        <div class="input-group">
            <span class="input-group-addon">密码</span>
            <input id="password" type="password" class="form-control" placeholder="password">
        </div>
        <button type="button" class="btn btn-info loginBtn">登录</button>
    </div>
    <script>
        $('.loginBtn').click(function () {
            localStorage.setItem('userId', 'admin');
            localStorage.setItem('userName', '系统管理员');
            localStorage.setItem('token', 'usvnewd82fdavdusvnewd82fdavdusvnewd82fdavdusvnewd82fdavd');
            window.location.herf = '/263.snipet.block.dhtml'
        })


        $('.loginBtn').click(function () {
            localStorage.setItem('userId', 'admin');
            localStorage.setItem('userName', '系统用户');
            $.ajax({
                type: 'POST',
                contentType: 'application/json;charset=UTF-8',
                url: '/264.snipet.block.dhtml',
                date: {
                    "userId": "admin",
                    "userName": "系统用户"
                },
                success: function (res) {
                    var data = jQuery.parseJSON(res);
                    localStorage.setItem('userId', 'admin');
                    localStorage.setItem('userName', '系统管理员');
                    localStorage.setItem('token',
                        'usvnewd82fdavdusvnewd82fdavdusvnewd82fdavdusvnewd82fdavd');
                    window.location.herf = '/263.snipet.block.dhtml'
                }
            })
        })

        $('.loginBtn').click(function(){
            localStorage.setItem('userId','admin');
            localStorage.setItem('userName','123');
            localStorage.setItem('token','usvnewd82fdavdusvnewd82fdavdusvnewd82fdavdusvnewd82fdavd');
            window.location.href=''
        })
    </script>