Question

我的应用程序按预期工作，直到我添加了一个存储在localStorage中的项目的“DELETE”方法。

我有这个带有字符串的HTML代码：

<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>

按下“添加”按钮时，将调用以下脚本：

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

这个脚本工作正常，它基本上检查存储长度并根据存储大小生成密钥，只需将textfield内容添加到值中并存储它。

然后，保存的项目会显示在另一个脚本的listview id="medList"中。（我不会添加脚本来节省空间，但如果需要请注释，我会添加它。）

以下脚本负责删除listview和localStorage中的项目：

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

它需要存储在listview上的“密钥”并相应地删除它。

现在我的问题依赖于从localStorage中移除项目时密钥变得不一致，并且当再次调用$('#manuallyAdd').click(function ()时，它会计算所有内容，如果类似的密钥已经存在，它将替换它（可悲的是我不需要它。）

让我解释一下例如：

我存储了以下内容：

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

上述Medicine2的列表视图已被删除，只留下Medicine1和Medicine3。

当我尝试添加另一个“Medicine”时，我希望Key = Medicine4 - Value = New Medicine出现，但它会被存储在Medicine3中，删除旧值并存储新值。

我认为这是由于if statement我已经到位，我似乎没有找到或解决一个能为我提供正确解决方案的不同方法。

我尝试添加一个语句，检查密钥是否已经存在并提供不同的密钥，但这仅适用于另一个项目从列表中删除。

非常感谢任何指针或想法。

很抱歉很长时间的问题，但我尽力解释。如果还有什么不清楚的地方请告诉我。

Answer 1

我没有使用localStorage，但这段代码看起来很奇怪：

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

 if (length >= number)...

这不会永远是真的，因为storage.length = storage.length？

无论如何，也许你可以这样做：

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

阻止jQuery替换localStorage中已存在的键和值

1 个答案: