Question

我有一个带有按钮的投票计数器，一旦用户点击它就会被禁用。但是，当页面刷新时，该按钮将再次可用。即使在用户刷新/关闭页面后，如何使按钮保持禁用状态？

这是我当前的代码https://hastebin.com/oyolabefal.xml

Answer 1

您可以使用local storage。但它仍将限制为一个浏览器。例如，如果用户通过chrome投票并在Firefox中尝试您的页面，则无法使用。此外，如果用户清除存储空间，它将无法工作。

您可以set一个密钥，read可以通过JS禁用该特定按钮。

如果要跨浏览器控制此功能，可能需要在DB

中保存此信息

Answer 2

本地存储只在aktuell Divice上。当您检查localStorage时，如果它有价值，您必须阻止投票

<html>
<head>
<script language="javascript">
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (!localStorage.clickcount) {
             localStorage.clickcount = 1;
        }else{
            document.getElementById("voted").innerHTML ="You have allreay Voted"; //show message you have allreay Voted
        }
        document.getElementById("result").innerHTML = localStorage.clickcount;
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
    </script>
<style>
    .counter {
        position: absolute;
        border: 1.5px solid #50915F;
        width: 350px;
        height: 200px;
        background: white;
        top: 30%;
        left: 40%;

        }

    .keke{
        position: absolute;
        border-width: 0;
        background: transparent;
        top: 30%;
        left: 44%;
        text-align: center;
        margin: auto;
        font-size: 45px;
        }
    .gbutton {
        position: absolute;
        top: 60%;
        left:37%;
        }
            .button {
        background-color: #50915F;
        border: none;
        color: black;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
    }

    .button2:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    }
</style>
</head>
<body>
    <div class="counter">
        <center><font face="Lato" id="voted"> Vote here</font></center><br>
        <div id="result" class="keke"></div>
        <button  class="button button2 gbutton" onclick="clickCounter();this.disabled=true" type="button">Vote</button>
    </div>
</body>
</html>

Answer 3

是localstorage是执行任务的最佳选项之一，在服务器端，您可以将状态保存在db中并有条件地显示按钮。

例如

import React from 'react';
import { render } from 'react-dom';

const styles = {
  component: {
    position: 'absolute',
    width: 100,
    height: 100
  },
  happy: {
    position: 'absolute',
    width: 100,
    height: 100,
    top: 100,
    left: 40,
    backgroundColor: 'yellow'
  },
  sad: {
    position: 'absolute',
    width: 100,
    height: 100,
    top: 20,
    left: 180,
    backgroundColor: 'blue'
  },
  angry: {
    position: 'absolute',
    width: 100,
    height: 100,
    top: 160,
    left: 500,
    backgroundColor: 'red',
  },
  stinky: {
    position: 'absolute',
    width: 100,
    height: 100,
    top: 210,
    left: 300,
    backgroundColor: 'green'
  },
  ninja: {
    position: 'absolute',
    zIndex: 100,
    width: 50,
    height: 50,
    backgroundColor: '#000'
  },
  deathstar: {
    position: 'absolute',
    zIndex: 100,
    width: 20,
    height: 20,
    backgroundColor: '#444'
  }
};

const Ninja = () => (<div style={styles.ninja}></div>);
const DeathStar = () => (<div style={styles.deathstar}></div>);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      types: ['happy', 'sad', 'angry', 'stinky'],
      ninja: 0,
      deathstar: 0
    };
    this.intervalNinja = null;
    this.intervalDeathstart = null;
  }

  randomNumber() {
    return Math.floor(Math.random() * (3 - 0 + 1)) + 0;
  }

  componentWillUnmount() {
    clearInterval(this.intervalNinja);
    clearInterval(this.intervalDeathstart);
    this.intervalNinja = null;
    this.intervalDeathstart = null;
  }

  componentDidMount() {
    this.intervalNinja = setInterval(() => {
      this.setState({
        ninja: this.randomNumber()
      });
    }, 1082);
    this.intervalDeathstart = setInterval(() => {
      this.setState({
        deathstar: this.randomNumber()
      });
    }, 987);
  }

  render() {
    return(
      <div>
        {this.state.types.map((type, index) => (
          <div style={styles[type]}>
            {this.state.ninja === index && <Ninja />}
            {this.state.deathstar === index && <DeathStar />}
          </div>
        ))}
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));

希望有所帮助

即使在页面关闭/刷新后也存储按钮属性

3 个答案: