Web - Deleting chosen list items with the LocalStorage API and jQuery

AS more or less, a proof-of-concept I want to use the LocalStorage API to save list items into storage. The method that I came up with is a little complicated and inefficient but up to the deleting single list items use case, it's worked well. Here's how it roughly works. Using localStorage.length I use Javascript to give notes an "id". This way I can use a for loop to iterate over from the first note to localStorage.length and append each note to the HTML page during page load in between executions. Furthermore, with this id I can identify which note was clicked on with jQuery. The problem is with deleting notes. I can delete the note that the user clicked on, but if I don't reorder the list of notes that creates what they call "holes" in storage. So any ideas?

Live demo here, but maybe the localStorage API is not supported: https://jsfiddle.net/2xke90sm/2/

Just the Javascript:

    var localStorage = window.localStorage; 

            //First load all of the current notes in the user's storage into the page as list items
            var al1 = "";

            for(var p=0;p<localStorage.length;p++) {
                var temp  = localStorage.getItem(p.toString());
                if(temp != null) {              //assures that something is being written from memory, problem is that if it does find some null value, it's skipping over it
                    $("ul").append("<li id='note-" + p + "'><span>X</span> " + temp + "</li>");
                    al1 += "Note #" + p + ": '" + temp + "' has been loaded from memory. \n";
                } 
            }
            console.log(al1);

            // Check Off Specific Todos By Clicking
            $("ul").on("click", "li", function(){
                $(this).toggleClass("completed");

                //test if $("#note-[index]").html() is the same as localStorge.getItem(index.toString()) are the same.
                var matchingStorage = localStorage.getItem($(this).attr("id").slice(5).toString());
                console.log("HTML: " + $(this).text() + "\n" + "Local Storage: " + "X " + matchingStorage);
            });

            //Click on X to delete Todo
            $("ul").on("click", "span", function(event){
                $(this).parent().fadeOut(500,function(){
                    if(localStorage.getItem($(this).attr("id").slice(5).toString())) {
                        localStorage.removeItem($(this).attr("id").slice(5).toString());        //remove from storage
                        $(this).remove();       //remove from the page
                        reorder();
                    } else {
                        alert("could not delete element from storage.");
                    }
                });
                event.stopPropagation();
            });

            //Add new list item on enter key press
            $("input[type='text']").keypress(function(event){
                if(event.which === 13){
                    //grabbing new todo text from input
                    var todoText = $(this).val();
                    $(this).val("");
                    //create a new li, add to ul and give it the index of the localStorage system as the id
                    $("ul").append("<li id='note-" + localStorage.length + "'>" +  "<span>X</span> " + todoText + "</li>");
                    localStorage.setItem(localStorage.length.toString(), todoText);     //write the todoTextGet with the index as the key
                }
            });

            $("#toggle-form").click(function(){
                $("input[type='text']").fadeToggle();
            });