无法通过 AJAX 存储本地存储值

Question

请帮忙， 我有一组动态生成的按钮递增输入。首先，我将 id 和值存储到 localstorage 中，一切正常，我可以看到所有 id-value 对，但我无法使用 AJAX 调用发送数据。 这是它的样子：

AJAX 是在按钮点击时分配的：

<script>
        $("#send_order").click(function (e) {
            if (localStorage) {
                if (localStorage.length) {
                    for (var i = 0; i < localStorage.length; i++) {
                        var pid = localStorage.key(i);
                        var value = localStorage.getItem(localStorage.key(i));

                        $.ajax({                                
                            url: "update.php?pid="+pid+"&qty="+value,
                            success: function(){
                                alert( "Прибыли данные: ");
                            }
                        });

                    }
                } else {
                    output += 'Нет сохраненных данных.';
                }
            } else {
                output += 'Ваш браузер не поддерживает локальное хранилище.';
            }
            )};
    </script>

但是当按钮被点击时没有任何反应。 我做错了什么？

Answer 1

虽然您的代码看起来不错，但在循环中一一发送本地存储数据效率很低。将 localstorage 转换为 json 字符串并同时发送所有内容更有意义。您可以在 php 更新脚本中 json_decode json 字符串。我还包含了一个函数来测试localStorage 是否可用，通过尝试写入它。这比if(localStorage)更可靠

 $("#send_order").on("click", function () {   
    var output='';
    if(localStorageTest() === true){
        console.log('localStorage is available');
        if(localStorage.length){
            var data=JSON.stringify(localStorage);
            $.ajax({ 
                    type: "GET",                               
                    url: "update.php?data="+data,
                    success: function(){
                               alert( "your data is send correctly!");
                    }
            }); 

        }else{
           output += 'localStorage is empty\n';     
        }
    }else{
        output += 'localStorage is not available\n';
    }
})

function localStorageTest(){
    var test = "test";
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}