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.

Sounds like you need an object or array to store the `Medicine` data. [See this question](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage). — Blazemonger, Nov 14 '13 at 19:00

zgood · Accepted Answer · 2013-11-14T19:52:20.893

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;
        }
    })
});

edited Nov 14 '13 at 19:52

answered Nov 14 '13 at 19:25

zgood

12,181
2
25
26

Thank you, this certainly makes it work and look better, yes I was aware of the "odd" statement there, it was rather pointless but it did the work for a little while, but now it had to go. I applied your method and it surely works, but now my problem is that all the items in localStorage are displayed so it means that the `medID` is also displayed and I dont really need it showing. May think of another way to "save" this ID value somewhere else. Thank you though! – Scur4 Nov 18 '13 at 13:18
1

Perhaps you could store the value in a global variable in javascript or a hidden field on the page. If you need it to persist across pages then you could store it in session or in a DB and retrieve it via ajax whenever you need it. – zgood Nov 18 '13 at 14:52
Thank you, your approach and suggestions helped me solve my issue :) – Scur4 Nov 18 '13 at 17:21

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

1 Answers1