页面刷新后本地存储恢复已删除的数据

Question

我构建了一个聊天应用程序并使用localStorage 来保持对话，即使在页面刷新后也是如此。如果聊天结束，我想删除 localStorage 并清除聊天窗口，这工作正常。但是如果用户再次发起聊天并刷新页面而不是之前的聊天对话恢复到localStorage

下面是我的代码：

var CHAT_MSG_LOCAL = []; //store messages into it
    CHAT_MSG_LOCAL.push(msgObj); //push message into the variable

    //save in local storage  when page refreshed 
    $(window).on('unload', function () {            
        saveLocalData(CHAT_MSG_LOCAL);  
    });

    //Retrive from local storage when page load
    $(document).ready(function () {
      retriveLocalData();
      var data = retriveLocalData();
      if (data.length > 0)
        for (var i = 0; i < data.length; i++) {
            output(data[i]); // generate html
        }
    });

    //Chat End
    $(".close-conversation").on("click", function (e) {
            e.preventDefault();                
            localStorage.removeItem('local-messages');
            localStorage.setItem('local-messages', []);

        });

    //save function
    function saveLocalData(CHAT_MSG_LOCAL) {
        var messageString = JSON.stringify(CHAT_MSG_LOCAL);
        localStorage.setItem('local-messages', messageString);

    }

    //retrive function
    function retriveLocalData() {
        var localmsgObj = localStorage.getItem('local-messages');
        var retrievedObject = {};
        if (localmsgObj.length > 0) {
            retrievedObject = JSON.parse(localmsgObj);
        }
        return retrievedObject;
    }

请帮我找出错误。提前致谢。

Answer 1

您正面临上述代码未清除 CHAT_MSG_LOCAL 参数的问题。

请使用以下代码将参数设为空。

 $(".close-conversation").on("click", function (e) {
      e.preventDefault();                
      localStorage.removeItem('local-messages');
      localStorage.setItem('local-messages', []);
      CHAT_MSG_LOCAL = []; //change
  });