文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将数据保存到本地存储中，然后在页面重新加载时将其持久化，我添加了本地存储功能，但它似乎无法工作。

问如何将数据保存到本地存储中，然后在页面重新加载时将其持久化，我添加了本地存储功能，但它似乎无法工作。
EN

Stack Overflow用户
提问于 2022-08-31 13:56:42
回答 1查看 47关注 0票数 0

我正在构建一个工作日调度程序，并且我很难弄清楚如何在调度事件(例如: 8am)中保存数据，然后让它在重新加载时持久化，我已经得到了有色的时间块元素(在一天过去的时间中更改颜色)。在如何保存时间块内的数据方面，我需要帮助。

​

代码语言：javascript
复制
const clock = document.getElementById("clock");
 setInterval(() => {
    const now = moment();
    const readable =now.format("dddd, MMMM Do YYYY, h:mm:ss a");
    clock.textContent = readable;

 }, 1000);

 $(document).ready(function(){

var scheduleContent = [];
var getLocalStorageData = JSON.parse(localStorage.getItem("schedule-items"));

if (getLocalStorageData !== null) {
    scheduleContent = getLocalStorageData;
}

   $("button").on("click", function() {
    var container = $(this).parent().parent();
    var inputValue = container.find("input").val();
    var inputId = container.find("input").attr("id");
    var textObj = {
        "input-id": inputId,
        "input-value": inputValue
    };

    if (textObj["input-value"] !== "") {
        scheduleContent.push(textObj);
        localStorage.setItem("schedule-items", JSON.stringify(scheduleContent));
    }
});





    var elements = $(".time-block");
    var d = new Date();
   var h = d.getHours();
   
    
    for (i = 0; i < elements.length; i++) {
        var t = parseInt(elements[i].getAttribute("data-hour"));

        if (h < t) {
            elements[i].classList.add('future');
            elements[i].classList.remove('past');
            elements[i].classList.remove('present');
        }  else if (h > t) {
            elements[i].classList.add('past');
            elements[i].classList.remove('future');
            elements[i].classList.remove('present');
        } else if (h === t) {
            elements[i].classList.add('present');
            elements[i].classList.remove('future');
            elements[i].classList.remove('past');
        } else if (h > 16 && h < 9) {
            elements[i].classList.add('future');
            elements[i].classList.remove('past');
            elements[i].classList.remove('present');
        }
    }

});
代码语言：javascript
复制
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1;
}

textarea {
  background: transparent;
  border: none;
  resize: none;
  color: #000000;
  border-left: 1px solid black;
  padding: 10px;
}

.jumbotron {
  text-align: center;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-bottom: 10px solid black;
}

.description {
  white-space: pre-wrap;
}

.time-block {
  text-align: center;
  border-radius: 15px;
}

.row {
  white-space: pre-wrap;
  height: 80px;
  border-top: 1px solid white;
}

.hour {
  background-color: #ffffff;
  color: #000000;
  border-top: 1px dashed #000000;
}

.past {
  background-color: #d3d3d3;
  color: white;
}

.present {
  background-color: #ff6961;
  color: white;
}

.future {
  background-color: #77dd77;
  color: white;
}

.saveBtn {
  border-left: 1px solid black;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #06aed5;
  color: white;
}

.saveBtn i:hover {
  font-size: 20px;
  transition: all 0.3s ease-in-out;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./styles/style.css" />
  <title>Work Day Scheduler</title>
  <header class="jumbotron">
    <h1 class="display-3">Work Day Scheduler</h1>
    <p class="lead">A simple calendar app for scheduling your work day</p>
    <p id="currentDay" class="lead"></p>
    <div id="clock"></div>
  </header>
</head>

<body>
  <div class="container">
  <!-- Timeblocks go here -->

  <div id ="hour-1" data-hour="8" class = "row time-block">
    <div class="col-1 hour">
      8AM
    </div>
    <textarea id ="8AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-2" data-hour="9" class = "row time-block">
    <div class="col-md-1 hour">
      9AM
    </div>
    <textarea id="9AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-3" data-hour="10" class = "row time-block">
    <div class="col-md-1 hour">
      10AM
    </div>
    <textarea id="10AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-4" data-hour="11" class = "row time-block">
    <div class="col-md-1 hour">
      11AM
    </div>
    <textarea id ="11AM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-5" data-hour="12" class = "row time-block">
    <div class="col-md-1 hour">
      12PM
    </div>
    <textarea id ="12PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-6" data-hour="13" class = "row time-block">
    <div class="col-md-1 hour">
      1PM
    </div>
    <textarea id="1PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-7" data-hour="14" class = "row time-block">
    <div class="col-md-1 hour">
      2PM
    </div>
    <textarea id="2PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-8" data-hour="15" class = "row time-block">
    <div class="col-md-1 hour">
      3PM
    </div>
    <textarea id="3PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-9" data-hour="16" class = "row time-block">
    <div class="col-md-1 hour">
      4PM
    </div>
    <textarea id="4PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <div id ="hour-10" data-hour="17" class = "row time-block">
    <div class="col-md-1 hour">
      5PM
    </div>
    <textarea id="5PM" class="col-md-10 description">
    </textarea>
    <button class="col-1 saveBtn btn"><i class="fas fa-save"></i></button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="./script.js"></script>
</body>

</html>

​

javascript
html
jquery
momentjs
EN

回答 1

Stack Overflow用户

发布于 2022-08-31 17:31:39

您可以使用Web (Window.localStorage或Window.sessionStorage)。请查看html5doctor上的这篇文章以获得更深入的解释。目前，所有现代浏览器都支持。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73557029

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档