Using localStorage multi-page communication solves a problem

When I was working on a project of embedding instant communication in our company’s mall, I encountered a thorny problem. Click customer service chat in the mall page, the browser will open a new TAB page (such requirements), due to the limitations of the back-end code, back-end brother requires me to always open a chat TAB page in the front end, otherwise it will cause a bug. Is the TAB page opened after the receipt of messages, customer service messages will be sent to the first opened chat TAB page, do not know how their backend caused this phenomenon, I can only first in accordance with the backend elder brother’s requirements to achieve the backend logic.

At the beginning, I didn’t think so much. Because of the use of window.open this API, so about the search how to use, on the open, after writing I also in nuggets to write a summary juejin.cn/post/702875…

The implementation is to use a variable to receive the window object of the new page returned by window.open, and then if the user clicks on the customer service chat again, I decide that if the variable exists, I will call his focus method. This will open the previous TAB instead of the new one. Of course you can do this by passing the same second parameter every time you call open, but this would involve the reload of the chat page, which I wanted to avoid (which is fine, just keep the TAB page open).

The above problem is solved after I found A new serious problem is that A page at the mall opened the chat page B, then if I were in A page to open A page, other goods is equivalent to reload the page at this time, A new load the page if go to click on the chat window. Then use of the service open to open the page, We can’t open or refresh the previously opened page B on this new page. At this time, I thought of many ways, such as trying to cache the reference of page B with localStorage. Obviously, I can’t, because the reference of page B is a window object. It’s impossible to stringify. For example, when the mall opens a new connection and the link is not a chat page, the mall will trigger the visible hidden event and call the closing method of B within the triggered event. Although this method can solve the new jump to another page can close the chat page, but the normal TAB switching will also cause the chat page closed, then through this solution, I came up with a third method.

Every time the chat page opens, I set a status to record the chat status.

localStorage.setItem('chatState','true')
Copy the code

The following code is executed each time you open the mall:

var chatState = localStorage.getItem('chatState'); If (chatState === 'true'){localstorage.setitem ('chatState','false') window.addEventListener("storage",function(event){ if(event.newValue === 'false'){ chatTabIns && chatTabIns.close() } });Copy the code

The best point above storage is, you in this page to set, this page will not trigger, but will trigger other pages listening, so when your new TAB page detects that you have opened the chat page, you can set to false, so it will trigger a shopping page listening, In the last mall page can successfully get the last mall page to open the chat page reference, can turn off, so see the phenomenon is to open the chat in the new jump page, the chat page opened before automatically closed, the new TAB page opened, in line with the requirements of the backend

Actual logic code:

openChat: function (chatType) { if (chatTabIns && ! ChatTabIns. Closed && chatTabIns. Location. Href. IndexOf ('/customerLogin ') > 1 && chatType = = = _chatType) {/ / is currently in the chat Console. log(' same TYPE and chat TAB page already open, open chat TAB page without re-executing code ') chattabins.focus (); } else {console.log(' If TYPE is different or the chat TAB is not open, open the chat TAB and re-execute the code ') // Check whether the chat page is open in the global cache, if it is open set to false, Var chatState = localstorage.getitem ('chatState'); If (chatState === 'true'){localstorage. setItem('chatState','false')} if(chatType === 'g=10060646')  = window.open(context_path + "/v2/imChat/customerLogin? flag=0", 'chatTabInsName') _chatType = chatType} else if (chatType === 'g=10085621') {// Doctor chatTabIns = window.open(context_path + "/v2/imChat/customerLogin? flag=1", 'chatTabInsName') _chatType = chatType } } }Copy the code

window.addEventListener("storage",function(event){
    if(event.newValue === 'false'){
        chatTabIns && chatTabIns.close()
    }
});
Copy the code

And then inside the chatTabIns:

localStorage.setItem('chatState','true')
Copy the code

window.onbeforeunload = function (e) {
    localStorage.setItem('chatState','false');
};
Copy the code