使用本地存储在页面刷新时加载递增和递减输入值

Question

各位！

我不确定以前是否有人在这里问过这个问题。

我想做的是通过单击加号和减号按钮更改购物车中每件商品的数量值。并在我使用本地存储刷新页面后保存该值。问题是，一旦我刷新页面，新的输入值就会应用到我购物车中的其他输入。

GIF for better explaining my issue

这是我的代码的简单版本：

HTML

<div class="item">
    <button class="plus" data-qty="1">+</button>
    <input class="count" data-qty="1" type="number" min="1" max="5" value="1">
    <button class="minus" data-qty="1">-</button>
</div>

<div class="item">
    <button class="plus" data-qty="2">+</button>
    <input class="count" data-qty="2" type="number" min="1" max="5" value="1">
    <button class="minus" data-qty="2">-</button>
</div>

Jquery

<script>
    let itemData = {
        itemQty: 1
    };

    if (localStorage.getItem("itemData") === null) {
        localStorage.setItem("itemData", JSON.stringify(itemData));
    }

    if(localStorage && localStorage.getItem('itemData')){
        var getItem = loadQuantity("itemData");
        $(".count").val(getItem.itemQty);
    }

    $(".plus").click(function(){
        var getItem = loadQuantity("itemData");
        getItem.itemQty = getItem.itemQty + 1;
        saveQuantity(getItem);
        $(this).closest(".item").find(".count").val(getItem.itemQty);
    });

    $(".minus").click(function(){
        var getItem = loadQuantity("itemData");
        if(getItem.itemQty != 1){
            getItem.itemQty = getItem.itemQty - 1;
        }
        saveQuantity(getItem);
        $(this).closest(".item").find(".count").val(getItem.itemQty);
    });

    function saveQuantity(data) {
        localStorage.setItem("itemData", JSON.stringify(data));
    }

    function loadQuantity(key) {
        return JSON.parse(localStorage.getItem(key));
    }

    if (localStorage.getItem(key) != null) {
        loadQuantity();
    }
</script>

感谢任何帮助。

Answer 1

您只为几个不同的输入存储一个值。您需要分别识别每个输入的每个值。

HTML

添加一个独特的属性“data-key”。或者您可以使用每个元素的“id”。

<div class="item">
    <button class="plus" data-qty="1">+</button>
    <input class="count" data-qty="1" type="number" min="1" max="5" value="1" data-key="myInput1"> <!-- add a unique key -->
    <button class="minus" data-qty="1">-</button>
</div>

<div class="item">
    <button class="plus" data-qty="2">+</button>
    <input class="count" data-qty="2" type="number" min="1" max="5" value="1" data-key="myInput2"> <!-- add a unique key -->
    <button class="minus" data-qty="2">-</button>
</div>

Jquery

我修改了你的代码。请参阅下面的评论。现在“data-key”用作 localStorage 的键。

<script>

    let itemData = {
        itemQty: 1
    };

    if (localStorage.getItem("itemData") === null) {
        localStorage.setItem("itemData", JSON.stringify(itemData));
    }

    // new code for initializing
    // parse all inputs and user their keys to find the corresponding itemdata
    var allinputs = $('.count');

    for (var i = 0; i < allinputs.length; i++) {

        // get data according to "data-key"
        var getItem = loadQuantity($(allinputs[i]).attr('data-key'));
       
        if (getItem != null) {
            $(allinputs[i]).val(getItem.itemQty);
        } else {
            // data not existing. Set global default value
            saveQuantity(JSON.stringify(itemData), $(allinputs[i]).attr('data-key')); // *1 set first parameter just to itemData
        }
    }


    $(".plus").click(function () {

        // use key to get itemdata of this input
        var keyOfInput = $(this).closest(".item").find(".count").attr('data-key');

        var getItem = loadQuantity(keyOfInput);
        getItem.itemQty = getItem.itemQty + 1;
        saveQuantity(getItem, keyOfInput);
        $(this).closest(".item").find(".count").val(getItem.itemQty);
    });

    $(".minus").click(function () {

        // use key to get itemdata of this input
        var keyOfInput = $(this).closest(".item").find(".count").attr('data-key');

        var getItem = loadQuantity(keyOfInput);

        if(getItem.itemQty != 1){
            getItem.itemQty = getItem.itemQty - 1;
        }

        saveQuantity(getItem, keyOfInput);
        $(this).closest(".item").find(".count").val(getItem.itemQty);
    });

    // added new parameter "key"
    function saveQuantity(data, key) {
        localStorage.setItem(key, JSON.stringify(data));
    }

    function loadQuantity(key) {
        return JSON.parse(localStorage.getItem(key)); // *2 Change to JSON.parse(JSON.parse(localStorage.getItem(key)));
    }

</script>

使用本地存储在页面刷新时加载递增和递减输入值

Load increment and decrement input values on page refresh with local storage

html

jquery

local-storage

product-quantity