[英]How to save data to local storage and then have it persist on page reload
我正在构建一个工作日调度程序并且我很难弄清楚如何在日程安排事件中保存数据（例如：早上 8 点）然后让它在重新加载时持续存在，我已经有了彩色的时间块元素（在一天中改变颜色作为小时通过）整理出来我只需要有关如何将数据保存在时间块内的帮助。 任何帮助将不胜感激，我有点坚持要做什么。
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 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'); } } });
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; }
<,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>
您可以使用 Web 存储 API（Window.localStorage 或 Window.sessionStorage）。 查看 html5doctor 上的这篇文章以获得更深入的解释。 目前所有现代浏览器都支持 Web 存储 API。
如何将星级值保存到本地存储以及页面重新加载时如何显示？
[英]How to save star rating value into a local storage and how it display when the page reload?
如何在IOS设备上离开页面之前在本地存储中保存数据？
[英]How to save data in Local Storage before leaving a page on IOS devices?
如何刷新本地存储而无需在javaScript或AngularJS中重新加载页面？
[英]How to refresh local Storage without reload the page in javaScript or AngularJS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.