本地存储项目选择 - HTML 5、Javascript

问题描述 投票：0回答：1

HTML 5 和 Javascript 中的本地存储项目选择

下面的代码旨在从本地存储中存储的数组中选择一个随机值，并相应地更新显示。

<DOCTYPE html!>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body onload="onload()">
    <div id="dd">
        <h1>Todays Daily Double Is: </h1><h1 id="person"></h1>
        <script type="text/javascript">
        function onload(argument) {
            document.getElementById('person').innerHTML = rand;
        }
        function runOncePerDay(){
          var today = new Date().toLocaleDateString();

          // if this function already ran today, do not continue.
          if( localStorage.yourapp_today == today ) return;

          // save today's date on the client's computer
          localStorage.yourapp_today = today;

          // your code below
            myArray = ["person1", "person2", "person3"];   
            var rand = myArray[Math.floor(Math.random() * myArray.length)];
            document.getElementById('person').innerHTML = rand;

        }

        runOncePerDay(); // will work   
        </script>
    </div>
</body>
</html>
javascript html
1个回答
0
投票

你试图解决问题的方法是行不通的。您的 

rand
变量不会神奇地记住客户上次打开网站时计算机上的内容。相反，您应该使用上次更新时间戳并仅在需要时刷新 localStorage，但您始终必须首先从 localStorage 获取数据。以下是您想要的工作实现：

function onload() {
  var data = localStorage.getItem("appSettings");
  if (! data || ! isTodayDate(JSON.parse(data).date)) {
    data = getData();
  }
  data = JSON.parse(data);
  document.getElementById("person").innerHTML = data.text;
}

function isTodayDate(date) {
  return moment().diff(moment(date), 'days') == 0;
}

function getData() {
  var myArray = ["Ethan Goodhart", "Emma Meyers", "Toby Parker"];   
  var rand = myArray[Math.floor(Math.random() * myArray.length)];
  var obj = {
    date: moment(),
    text: rand
  };
  localStorage.setItem("appSettings", JSON.stringify(obj));
  return JSON.stringify(obj);
}

onload();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<h1>Todays Daily Double Is: </h1><h1 id="person"></h1>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.