Great thanks Mark!
I have another problem with a function but only when testing within Internet Explorer and Microsoft Edge. The code doesn’t show any console errors within Chrome and Firefox.
The error centres around the save() function which I have created, while the specific error is SCRIPT5007: Unable to set property ‘taskList’ of undefined or null reference.
According to Internet Explorer there is also an “unexpected token” on line 29, though this doesn’t cause a problem in Chrome/Firefox either. Any thoughts?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title Here</title>
<style type="text/css">
textarea{
font-family:Arial;
width:500px;
height:200px;
display:block;
margin-bottom:25px;
}
#messageContainer{
height:20px;
}
</style>
</head>
<body>
<div id="container">
<h1>Using Local Storage</h1>
<h2>Task List</h2>
<div id="messageContainer"><span id="msg"></span></div>
<textarea id="tasksBox" autofocus></textarea>
<button id="saveButton">Save</button>
<a href="javascript:void(0);" id="deleteAllLink">Delete</a>
</div>
</body>
<script src="jquery-1.12.3.js"></script>
<script>
var tasksBox, msg
$(function(){
tasksBox = $("#tasksBox");
msg = $("#msg");
if (window.localStorage){
if (window.localStorage.taskList != null){
var tasks = window.localStorage.taskList;
var taskList = tasks.split(",").join("\n");
tasksBox.val(taskList);
}
}
});
$("#saveButton").click(function(){
save();
showMessage("Saved");
});
$("#deleteAllLink").click(function(){
window.localStorage.removeItem("taskList");
tasksBox.val("");
showMessage("Deleted");
});
function save() {
var tasks = tasksBox.val();
var taskList = tasks.split("\n").join(",");
window.localStorage.taskList = taskList;
}
function showMessage(message){
msg.html(message);
msg.fadeOut(1000);
}
</script>
</html>