What is “snapshot function”?

A system has a timeout function (for example, if you do not perform operations for half an hour, you will time out and return to the login page). A function block in the system is complicated, and if the user does not click the “save” button to interact with the background, then once the system times out, the user’s work is wasted. Because of this, you need to remember the user’s actions on this complex page and “snapshot” the user’s actions to avoid wasting labor.

Foreground OR background implementation?

The front end implementation, is to use the front-end storage scheme to timing record storage. The background implementation is to call the save request periodically, which is equivalent to secretly helping the user click the “save” button (but the interaction with the background will refresh the session time, may cause the login status never timeout). Background implementation scheme is very simple, the following analysis of the foreground implementation scheme. Which one to use may depend on the scenario.

Front desk implementation scheme analysis

  1. Cookie

    The size is limited to 4KB and generally saves login information (” remember password “). Stored in cookies, it will be carried in the HTTP header to communicate with the server, resulting in performance problems. Ruled out.

  2. Vuex

    For the Vue framework used in the project, consider Vuex. But Vuex is more about communication between multiple components than storage, and information is lost after refreshing. Ruled out.

  3. sessionStorage

    The size is usually 5M. The data remains after the refresh, but is only valid for the current session page and will be cleared when the page or browser is closed. Yes, the scenario is limited.

  4. localStorage

    The size is usually 5M. The data remains after the refresh and is permanently stored in the browser (unless it is erased). Relatively good.

    In the complex page, the initial default information is about 0.8K, and the complex business scene information is about 50K. 5M is generally enough for a user.

    F5 or Ctrl+R will not lose Storage, but forcibly clearing the browser cache will.

The implementation process

The foreground implementation scenario is limited

With a pure front-end implementation of snapshots, there are a number of unavoidable scenarios:

1. The user fails to save the information after half operation on computer A due to timeout. If he continues operation on computer B, he cannot remember the last arrangement information

2. Forcibly clearing storage information will cause the remembered layout information to be lost

3. Login with your account at the same time

4, before the normal page, suddenly open the traceless page, will lead to the loss of choreography information to remember. SessionStorage is only valid in the current TAB, localStorage can cross TAB, but close the browser storage information will be lost.