JavaScript / jQuery: Adjust the Task List application that uses web storage so the tasks in local storage have an expiration date. That way, theyll behave more like a persistent cookie rather than staying in local storage indefinitely.

Open and test the Task List application

1. Use your text editor or IDE to open the HTML and JavaScript files.

2. Run the application in Chrome and enter a task or two. Then click on the F12 button to open the developer tools, and navigate to the Application panel. In the Storage pane, expand the Local Storage node and then select the URL for the website to view the tasks storage item that you just added.

3. Click on the Clear Tasks button to clear the tasks, and then close the browser.

Enhance the task storage to include an expiration date

4. Display the task_list.js file. Then, find the line of code in the event handler for the click event of the Add Task button that adds the updated tasks to local storage.

5. After that code, create a new Date object for todays date and add 21days to that date. Then, call the toDateString() method of the Date object and store the resulting value in local storage in a property named expiration.

6. Repeat step 2. Notice that this time theres a tasks storage item and an expiration storage item.

7. In the event handler for the click event of the Clear Tasks button, add code that removes the expiration item from local storage.

8. In the displayTasks() function, comment out the line of code that sets the value of the task_list textarea element. Then, write code that retrieves the expiration value from local storage and converts it to a Date object. After that, create a Date object for todays date.

9. Code an if statement that checks whether the expiration date is in the past. To do that, compare the values returned by the getTime() method of each Date object. Then, if the expiration date is in the past, remove both the tasks and expiration items from local storage. If not, retrieve the tasks from local storage and display them as before.

10. Run the application and enter a task or two if none are already there. Next, open the Application panel and edit the expiration date so its in the past. Then, refresh the application. Notice that the tasks are cleared from both the application display and from local storage.

/**********Code************/

task_list.js

"use strict";

$(document).ready(function(){

var displayTasks = function() {

$("#task_list").val( localStorage.E15tasks );

$("#task").focus();

};

$("#add_task").click(function() {

var textbox = $("#task");

var task = textbox.val();

if (task === "") {

alert("Please enter a task.");

textbox.focus();

} else {

// add task to web storage

var tasks = localStorage.E15tasks || ""; // default value of empty string

localStorage.E15tasks = tasks.concat( task, " " );

// clear task text box and re-display tasks

textbox.val( "" );

displayTasks();

}

});

$("#clear_tasks").click(function() {

localStorage.removeItem( "E15tasks" );

$("#task_list").val( "" );

$("#task").focus();

});

// display tasks on initial load

displayTasks();

});

index.html

Task Manager

Task List

Task

task_list.css

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100%;

background-color: white;

width: 750px;

margin: 0 auto;

border: 3px solid blue;

padding: 0 2em 2em;

}

h1 {

font-size: 150%;

color: blue;

margin-bottom: .5em;

}

label {

float: left;

width: 8em;

}

input {

width: 22em;

margin-right: 1em;

margin-bottom: 1em;

}

#tasks {

margin-top: 0;

float: right;

}