0

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コンテンツを値に追加して保存します。

保存されたアイテムは、別のスクリプトによってlistviewwithに表示されます。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残して削除されます。Medicine1Medicine3

別の「薬」を追加しようとすると、表示されると予想Key = Medicine4 - Value = New Medicineされますが、代わりにMedicine3古い値を削除して新しい値を保存することに保存されます。

これはif statement、適切な解決策を提供する別の方法を見つけたり、回避したりしていないようです。

キーが既に存在するかどうかを確認し、別のキーを提供するステートメントを追加しようとしましたが、これは別の項目がリストから削除されるまでしか機能しません。

ポインタやアイデアは大歓迎です。

長い質問で申し訳ありませんが、私はそれを説明するために最善を尽くしました。まだ不明な点があればお知らせください。

4

1 に答える 1

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;
        }
    })
});
于 2013-11-14T19:25:41.500 に答える