Stop jQuery from replacing keys and values that already exist in localStorage

Question

My application was working as expected until I added a "DELETE" method of items stored in the localStorage.

I have this HTML code that takes a string:

<div>
    <div ><input type="text" id="manuallyName" name="manuallyName" placeholder="Medicine Name, Strength & Form..." /></div>
        <div class="ui-grid-a" style="padding:15px;">
            <div class="ui-block-a"><input id="manualClear" type="Button" data-icon="delete" data-iconpos="left" value="Cancel" /></div>
            <div class="ui-block-b"><input id="manuallyAdd" type="button" data-icon="cross" value="Add" /></div>
        </div>
</div>

and when the "Add" button is pressed the following script is called:

$(document).ready(function () {
        $('#manuallyAdd').click(function () {
            if ($("#manuallyName").val() != "") {

                var length = storage.length;
                var number = storage.length;

                if (length >= number) {
                    number++;
                    var key = "Medicine" + number.toString();
                    var value = $("#manuallyName").val();
                    storage.setItem(key, value);
                }

                    document.getElementById("manuallyName").value = "";
                    return true;
            }
            else {
                alert('Please Provide Medicine Name')
                return false;
            }
        })
    });

This script works ok, it basically checks the storage length and produces keys according to the storage size and just adds the textfield content into the value and stores it.

The items saved are then displayed in a listview with id="medList" by another script. (I wont be adding the script to save space but if needed please comment and I'll add it).

The following script is the one that takes care of deleting the items from both the listview and localStorage:

$('ul').on('click', '.del', function (el) {
    $(this).closest('li').remove();
    var key = $(this).attr('key');
    localStorage.removeItem(key);
    $('ul.medList').listview('refresh');
});

It takes the "key" that's stored on the listview and removes it accordingly.

Now my problem relies when a item is removed from the localStorage the keys become inconsistent and when the $('#manuallyAdd').click(function () is called again, it will count everything and if a similar key already exists it will replace it (and tragically I don't need it to).

Let me explain a for instance:

I have the following stored:

Key = Medicine1 - Value = a
Key = Medicine2 - Value = b
Key = Medicine3 - Value = c

On the listview of the above Medicine2 gets deleted, leaving only Medicine1 and Medicine3.

When I try and add another "Medicine" I would expect Key = Medicine4 - Value = New Medicine to appear but instead it gets stored in Medicine3 getting rid of the old value and storing the new one.

I believe this is due to the if statement I have in place, and I don't seem to find or work around a different method that will provide me with the right solution.

I have tried adding a statement that checks if the key already exists and providing a different key but this only works until another item gets removed from the list.

Any pointers or ideas would be greatly appreciated.

Sorry for long question but I tried my best to explain it. If anything is still unclear please let me know.

Answer 1

I have not worked with localStorage, but this block of code seems odd:

var length = storage.length;
var number = storage.length;

 if (length >= number)...

Wouldn't that always be true because storage.length = storage.length ?

Anyways, maybe you could do something like this:

$(document).ready(function () {
    if (storage.getItem("medID") === null) 
           storage.setItem("medID", "0");

    $('#manuallyAdd').click(function () {
        if ($("#manuallyName").val() != "") {

            var number = parseInt(storage.getItem("medID"));
            number++;
            var key = "Medicine" + number.toString();
            var value = $("#manuallyName").val();
            storage.setItem(key, value);
            storage.setItem("medID", number.toString());

            document.getElementById("manuallyName").value = "";
            return true;
        }
        else {
            alert('Please Provide Medicine Name')
            return false;
        }
    })
});