如何保留用JS onclick函数改变的innerhtml内容

Question

这是一个简单的问题，但似乎无法解决。 我希望能够更改链接的 innerhtml 内容，一旦由从单独链接触发的 onclick 函数触发，该链接实际上将用户带到另一个页面（在网站内部而不是外部站点），我让脚本工作但一旦页面重新加载并转到链接指向的另一个页面，想要更改的 innerhtml 内容就会消失。即使页面被重新加载并带到其他地方，我实际上也想保留文本更改的更改。

脚本看起来像这样：

<script>
    function myFunction() {
            document.getElementById("testchange").innerHTML = "Get Started";
    } //Js script that does the innerHMTL change
</script> 

<a href="http://example.com/en/page.html"  class="lang-col" onclick=" myFunction()">eng</a> // button that triggers the onclick function but takes the user to another page inside the site

<a href="http://example.com" id="testchange" >Hello</a> // text to be changed by JS and want to keep the change even if the page is reloaded and taken elsewhere

那么有什么想法我可以做到这一点吗？谢谢

Answer 1

为此，您需要某种存储空间。让我们试试 localStorage：

您在设置变量之前首先检查是否已进行更改，然后处理您的事件：

<script>
    function ready(fn) {
        if (document.readyState != 'loading'){
            fn();
          } else {
            document.addEventListener('DOMContentLoaded', fn);
          }
        }
    }

    function myFunction() {
        document.getElementById("testchange").innerHTML = "Get Started";
        //this will save the state of the change
        localStorage.setItem('textSet', true);
    }

    //this will change the text when the page is loaded if the change has been made before.
    ready(function(){
        if(localStorage.getItem('textSet')){
            document.getElementById("testchange").innerHTML = "Get Started";
        }
    })
</script>

Answer 2

使用 Cookie 或会话/本地存储，下面的 sessionStorage 选项

sessionStorage 中存储的数据会在浏览器窗口打开时持续存在，而 localStorage 没有过期时间

<a href="http://example.com/en/page.html"  class="lang-col" onclick=" setFlag()">eng</a>
<a href="http://example.com" id="testchange" >Hello</a>
<script>
    function setFlag() {
      sessionStorage.setItem('setFlag', 'true');
    } 
    if (sessionStorage.getItem("setFlag")) 
        document.getElementById("testchange").innerHTML = "Get Started";
</script> 

注意：此代码需要放置在您的 HTML 元素之后，理想情况下位于页面底部