In the actual development process of my system, I meet a requirement that I need to make the application return to the original location of each page when it jumps between each page for the convenience of users.
When I look up the data on the Internet, I see a lot of schemes, and there are different opinions, but there are only a few feasible codes available. So I simply write a method of caching page with SessionStorage according to my own ideas. When I leave the page, I save all the contents in the container that need to be cached into SessionStorage, and reload when I return the page, which is convenient for user operation and effect As follows:

Usage method
The usage is also very simple. Let's talk about it step by step.

First, add cache to the class name of the container you need to cache the label, and write a name as the unique tag of the container. The example is as follows:

<div class="weui-tab cache" name="index">
    ....
</div>

Second, declare global variables to obtain cache contents and containers. The example is as follows:

var cache;
var cacheId = $(".cache").attr("name");

Then, the cache is called when the page is loaded and generated when leaving the page. The code is as follows:

window.onload = function () {
    //Load cached list
    loadCache(cacheId);
}

window.onunload = function () {
    //You can use the flag needCache to control whether you need to cache or not
    if (localStorage.needCache == 'true') {
        //Generate cache when leaving page
        createCache(cacheId);
    }
}

/* *
 * @brief Can cache the content and location of specified multiple controls
 * @param cacheId id of the cache element
 * @return null
 * */
function createCache(cacheId) {
    //Caching content
    var list = [];
    var listController = $('.cache');
    $.each(listController, function (index, value, array) {
        list.push(value.innerHTML);
    })
    //Cache the browse location
    var top = [];
    var topController = $(".cache").find(".top");
    $.each(topController, function (index, value, array) {
        top.push(value.scrollTop);
    })
    //Save to sessionstorage
    sessionStorage.setItem(cacheId, JSON.stringify({
        list: list,
        top: top
    }));
}

/* *
 * @breif The cache can be loaded for multiple specified controls
 * @param Load cached id
 * @return null
 * */
function loadCache(cacheId) {
    //Be sure to put it at the front of the whole js file
    cache = sessionStorage.getItem(cacheId);
    if (cache) {
        cache = JSON.parse(cache);
        //Restore content
        var listController = $('.cache');
        $.each(listController, function (index, value, array) {
            value.innerHTML = cache.list[index];
        })
        //Reduction location
        var topController = $(".cache").find(".top");
        $.each(topController, function (index, value, array) {
            value.scrollTop = cache.top[index];
        })
    }
}

Most of them can be directly copied, and then improved according to your needs, you can use it well.

github delivery address: https://github.com/JunJieDing666/YouZhiGou

If you have any mistakes, please point out. If you don't understand, please discuss.