即使为每个登录用户刷新后,Javascript中按钮的保存状态

问题描述 投票:0回答:2

我正在开发Django应用程序,并试图保存单击按钮的状态。

我有一个登录表单,该表单接受注册用户的凭据(如果输入)。如果成功,则用户将被重定向到包含两个按钮的页面。我的主要目的是为新用户设置“按钮1”并禁用“按钮2”(一旦他/她登录)。因此,如果用户单击“按钮1”,则此按钮将被禁用,然后将启用“按钮2”。当同一用户注销时,应保存按钮状态。这意味着用户不应再单击“按钮1”,因为上次启用了“按钮2”。

但是,这似乎适用于所有登录的用户。按钮的状态与登录的特定用户并不对应,但总体上会影响到所有用户。

这是代码:

interface.html:

<script>
    var disbledBtn = localStorage.getItem('disabled'); // get the id from localStorage
    $(disbledBtn).attr("disabled", true); // set the attribute by the id
    $('#button1').click(function () {
        $("#button1").attr("disabled", true);
        $("#button2").attr("disabled", false);
        localStorage.setItem('disabled', '#button1');
    }
</script>

<body>
        <button type="button" id ='button1'>  Button 1 </button>
        <button type="button" id ='button2'> Button 2 </button>
</body>

如何保持用户A的按钮状态和用户B的按钮状态彼此不同?。当前,如果在用户A的帐户中单击了button1,则将启用用户B的按钮2(这不是我想要的)

是否有方法可以达到此要求?

javascript jquery django
2个回答
0
投票

在本地存储中

Key         Value
1001        2
1002        1
1003        2

脚本

<script>
        var user_id = 1001;  // unique id of user so we can find from localstorage

        var disbledBtn = localStorage.getItem(user_id);  // here it gives 1 OR 2 (if 1 then button1 is desabled, if 2 then button2 is disabled 

        if(disbledBtn == 2) {
          $("#button2").attr("disabled", true);  // disable button2  
        } else {
          $("#button1").attr("disabled", true);  // disable button1
        }

        $('#button1').click(function () {
            $("#button1").attr("disabled", true);
            $("#button2").attr("disabled", false);
            localStorage.setItem(user_id, '1');    // store 1 in localstorage because button1 is now disabled
        }
        $('#button2').click(function () {
            $("#button2").attr("disabled", true);
            $("#button1").attr("disabled", false);
            localStorage.setItem(user_id, '2');    // store 2 in localstorage because button2 is now disabled
        }

    </script>

    <body>
        <button type="button" id ='button1'>  Button 1 </button>
        <button type="button" id ='button2'> Button 2 </button>
    </body>

0
投票

只需通过https://github.com/js-cookie/js-cookie替换LocalStorage

每个用户的Cookie完全不同。

© www.soinside.com 2019 - 2024. All rights reserved.