用户刷新页面，保留当前内容

要实现一个功能，当用户刷新页面时，能保留当前状态，而不恢复默认设置。

在网上找了一下，觉得可以用localStorage或者sessionStorage试一下。就是在用户刷新页面时（严格的来说应该是要离开当前页面的时候）用storage保留当前的html。这里涉及到全局的eventlistener->onbeforeunload

一、

存储当前html

window.onbeforeunload = function(){
    var html = document.querySelector("html");
    sessionStorage.setItem("pre",html.innerHTML);
}

二、

在整个窗体加载完成后，替换innerhtml

window.addEventListener("load",function(){
    var before = sessionStorage.getItem("loadtime");
    if(!before){
        sessionStorage.setItem("loadtime",1);
    }else{
        sessionStorage.setItem("loadtime",parseInt(before)+1);
    }//sessionStorage采用的是key-value形式，第二个参数为字符串类型，如果不对before值作整型处理，javascript会认为是字符串的拼接，这样就无法起到数字递增的效果
    var storetime = sessionStorage.getItem("loadtime");
    //console.log(storetime);
    if(storetime>1){
       var preHtml = sessionStorage.getItem("pre");
       var html = document.querySelector("html");
       html.innerHTML = preHtml;
            
     }else if(storetime==1){
        sessionStorage.removeItem("pre");
     }
    
    //后续控制交互行为或者处理业务的js代码
})

三、问题

1.一开始本来是想利用闭包或者全局变量来实现加载次数的累计，但发现一旦刷新，闭包或者全局变量就会恢复初始状态，然后执行代码自增一次。

function tttt(){
    var loadTime = 0;
    console.log(loadTime)
    return function(){
        loadTime++;
        console.log(loadTime)
        if(loadTime>1){
            var preHtml = localStorage.getItem("pre");
            var html = document.querySelector("html");
            html.innerHTML = preHtml;
        }else if(loadTime==1){
            localStorage.removeItem("pre");
        }
    }
    
}
var bibao = tttt();
bibao();

当然，用sessionStorage存储loadtime有点大材小用，cookie也可以满足需求。

window.onload = function(){
    var target = document.cookie.match(/(?<=loadtime=)\d/);
    if(target){
        document.cookie = "loadtime="+(parseInt(target)+1);
    }else{
        document.cookie = "loadtime=1";
    } 
    console.log(document.cookie)
}

2.虽然刷新页面后，当前的内容依旧保存，但发现原本控制交互的js代码（并没有放在onload下）执行不了。我以为是外部js文件没有引入，但是窗体的监听事件依然能够执行。后来在网上查了一下，才发现js事件是绑定在原先的DOM元素上，当用innerHTML将旧的DOM元素移除后，js事件并不会迁移到新的DOM元素上（即使变量名、元素id等属性都没有改变）。后面不得不将控制交互的js代码统一放在onload下，等首次加载或替换页面后，再重新获取当前元素。