Удалить объекты localStorage после успеха AJAX

Question

// Редактировать

Спасибо за всю помощь.Боюсь, я поступил очень неправильно, поэтому я реструктурировал весь код, а также «структуру» массива localStorage

Вот мой полный код и намерение, стоящее за ним.Я хочу проверить наличие подключения (, для которого я использую pingjs.js ), и если подключение отсутствует, пользовательский ввод сохраняется в localStorage.Если мы получим ответный сигнал, мы загрузим все в localStorage через jQuery AJAX и удаляем эти отправленные данные (не все, что появилось после, например) из массива localStorage.Дело также в том, что я хочу избежать дубликатов (обновить уже существующие данные на основе stnr AND pstn ), а также получить что-то вроде уникального идентификатора для индексации массива localStorage .

Пока это мой код, за исключением индексов и обновления уже существующих stnr и pstn:

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/pingjs.js"></script>
<script>
    $(document).ready(function() {
        $('#store').click(function() {
            var startnummer = $("#startnummer").val();
            var ergebnis = $("#ergebnis").val();
            var position = $("#position").val();

            var data = [
                {
                    "stnr": startnummer,
                    "rslt": ergebnis,
                    "pstn": position
                }
            ]

            /*  
                So far I use localStorage.length for indexing, but
                I want something for checking of duplicates and update
                them if necessary, based on stnr AND pstn, so if these
                are same, only update rslt
            */
            localStorage.setItem((localStorage.length), JSON.stringify(data));
        });

        //  We got a ping
        ping('https://example.com/').then(function(delta) {
            if(window.localStorage !== undefined) {
                var fields = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: 'xyz.php',
                    data: fields,
                    success: function(html){
                        //  Here I want to delete all the passed data
                        localStorage.removeItem( ??? );

                        //  Output status
                        $('#status').fadeIn(500).delay(5000).fadeOut(500).html(html);
                    }
                });
            } else {
                alert("Storage Failed. Try refreshing");
            }   
        //  We have no ping
        }).catch(function(err) {
            alert('Could not ping remote URL', err);
        });
    });
</script>

Хранение работает без проблем.Так что никаких проблем здесь.

Answer 1

Похоже, вы не совсем понимаете localStorage API. Я бы предложил прочитать localStorage из MDN.

Первая проблема в том, что вы, возможно, неправильно храните информацию в localStorage. Локальное хранилище на основе ключа . Это означает, что все данные находятся в локальном хранилище с помощью ключа. Например {"key" : "data"}.

Примечание: данные в локальном хранилище хранятся в виде строки. Таким образом, для read/write данных to/from локального хранилища вам необходимо stringify/parse его.

Если продолжить ваш вопрос, у меня сложилось впечатление, что вы сохраняете весь этот массив в localStorage, а затем пытаетесь удалить каждый ключ внутри массива. Как было сказано ранее, это не сработает по нескольким причинам. Во-первых, вы не можете использовать метод localStorage.removeItem() для удаления сохраненного объекта, потому что объект на самом деле является строкой и не анализируется. Во-вторых, даже если она не была сохранена как строка, функция не работает с данными хранилища, а с ключом, под которым они были сохранены. То, чего не хватает в вашем коде, что очень помогло бы, это то, как вы экономите в localStorage. Потому что в этом случае вам даже не придется звонить removeItem() три раза, просто позвоните один раз на ключ, под которым он все хранится. Позвольте мне привести пример, который, я думаю, может относиться к вашему вопросу:

var data = [
  {
    "id": 1,
    "name" : "Joe"
  },
  {
    "id": 2,
    "name": "Peter"
  }
]

//Setting the data to localStorage under the key "people"
localStorage.setItem("people", data);

// ... inside your ajax function
 ...({

  //Remove whole array of data based on key

  localStorage.removeItem("people");
  
  //All done with removal
  
  //Rest of your code
 })

ЕСЛИ вы хотите удалить только эти определенные ключи в localStorage, вам придется либо сохранять их отдельно (рекомендуется), либо читать, анализировать , редактируйте, восстанавливайте (не рекомендуется) данные каждый раз, когда вы хотите это сделать.

Answer 2

Вызовите removeItem функцию передачи ключа данных, которые вы хотите удалить.

$.ajax({
    type: 'POST',
    url: 'xyz.php',
    data: {
        results: resultobj
    },
    success: function(callback){
        // Delete data from staticLS here
        localStorage.removeItem("tmemberData")
        // Output message of callback status
        $('#status').fadeIn(500).delay(5000).fadeOut(500).html(callback);
    }
});