使用Javascript重新加载页面后，即使单击也可以保持选定的颜色

Question

In my Date Picker, you can select date and time. I am using Javascript. You can select date and time by clicking. After selecting date, you will land up to time page. After selecting a time from timeslots, date and time both will go to server. I want to highlight the selected date and time with red color, even after reload the page color should be there. Date must be highlighted with time as well. So, that if you come back then date color should be highlighted too. Main thing, I want to store the color somewhere, so if I reload the page then I should see the color. Here, is my date and time getting JS code and I have added plunker below.

 datepicker = angular.module('datepicker', []); datepicker.controller('dateTimePicker', ['$scope', '$http', 'formatDateTime', '$filter', function($scope, $http, formatDateTime, $filter) { $scope.showType = 1; $scope.selected = {}; $scope.changeShowType = function (type) { $scope.showType = type; $scope.monthName = $filter('date')($scope.selected.date, 'MMM yyyy'); }; $scope.selectDate = function(date) { console.log(date); $scope.showType = 2; $scope.selected.date = date; $scope.monthName = $filter('date')(date, 'dd MMM yyyy'); }; $scope.selectTime = function(time) { $scope.selected.time = time; $http.post('date/selected', $scope.selected); }; var getTimeValues = function() { formatDateTime.getTimeValues(); } getTimeValues(); var bindScope = function() { $scope.timeValues = formatDateTime.timeValues; } bindScope(); //Date Picker START var date = new Date(); var months = [], monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var tempMonth; tempMonth = date.getMonth(); for (var i = 0; i <= 12; i++) { months.push(monthNames[tempMonth] + ' ' + date.getFullYear()); tempMonth += 1; if (tempMonth >= 12) { tempMonth = 0; date.setFullYear(date.getFullYear() + 1); } } $scope.year = 2015; $scope.changeMonth = function(steps) { if ($scope.monthIndex + steps >= 0 && $scope.monthIndex + steps <= 12) { $scope.dateValues = []; $scope.monthIndex = $scope.monthIndex + steps; $scope.monthName = $scope.months[$scope.monthIndex]; var date = new Date(); console.log(date.getMonth()); var offset = date.getMonth() console.log($scope.monthIndex); var offsetDate = offset + $scope.monthIndex; $scope.nDays = new Date($scope.year, offsetDate + 1, 0).getDate(); console.log(offsetDate + 1); console.log(new Date($scope.year, offsetDate, 1)); for (i = 1; i <= $scope.nDays; i++) { var d = new Date(); d.setHours(0, 0, 0, 0); var displayDate = new Date($scope.year, offsetDate, i); if (displayDate >= d) $scope.dateValues.push(displayDate); } } else { console.log("missed") } $scope.showType =1; }; $scope.monthIndex = 0; $scope.months = months; $scope.monthName = months[0]; $scope.changeMonth(0); }]); datepicker.factory('formatDateTime', [function() { return { //final structures which are bound to view // dateValues: [], timeValues: [], //generates one hour slots between minTime and maxTime getTimeValues: function() { console.log('here i am'); var timeValues = this.timeValues; var minTime = 11; //vary this to change the first service slot available var maxTime = 19; //vary this to chage the last service slot available var string; for (var i = minTime; i < maxTime; i++) { if (i < 12) { lowersuffix = 'AM'; startRange = i; } else if (i === 12) { lowersuffix = 'PM'; startRange = i; } else { lowersuffix = 'PM'; startRange = i - 12; } if ((i + 1) < 12) { uppersuffix = 'AM'; endRange = (i + 1); } else if ((i + 1) === 12) { uppersuffix = 'PM'; endRange = (i + 1); } else { uppersuffix = 'PM'; endRange = (i + 1) - 12; } string = startRange + lowersuffix + '-' + endRange + uppersuffix; console.log(string); timeValues.push(string); } } }; }]); 

Plunker Link :- http://plnkr.co/edit/35UwiYLEqv3LYY6RiL1q?p=preview

Answer 1

you can use cookies to store the values

document.cookie="username=John Doe";

W3Schools Cookies

Answer 2

If your target browser supports localStorage I would recommend:

localStorage.setItem("colour", "blue");
localStorage.getItem("colour");