There is a number of to-do items in the menu bar. The number increases or decreases according to the task operation. How to keep it updated?

The project adopts the iframe three-frame mode, the header is the menu bar, the middle and the bottom.
The current requirement is to display the number of to-do tasks on the menu bar. According to the user's corresponding task operations, the number of to-do tasks in different menu bars can be increased or decreased, because the menu bar is open, similar to the picture below:

So when the user operates (This operation refers to adding a task, completing a task, or deleting a task) a task, the corresponding position of the menu bar and the number of tasks are updated from time to time. How to do this?

My current approach is: in the operation area, refresh the header information after the operation is completed. However, although this can ensure that the number of tasks in the menu is updated, the current style will disappear and become the first one when entering the website. The default style is a bit unclear, please give me some advice!

This is what I did to update the header information:

Reply content:

The project adopts the iframe three-frame mode, the header is the menu bar, the middle and the bottom.
The current requirement is to display the number of to-do tasks on the menu bar. According to the user's corresponding task operations, the number of to-do tasks in different menu bars can be increased or decreased, because the menu bar is open, similar to the picture below:

So when the user operates (This operation refers to adding a task, completing a task, or deleting a task) a task, the corresponding position of the menu bar and the number of tasks are updated from time to time. How to do it?

My current approach is: in the operation area, refresh the header information after the operation is completed. However, although this can ensure that the number of tasks in the menu is updated, the current style will disappear and become the first one when entering the website. The default style is a bit unclear, please give me some advice!

This is what I did to update the header information:

http://www.workerman.net/web-sender

websocket

ajax
websocket

1. Use ajax to request every certain time
2. Use long connection websocket