Question

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

脚本看起来像这样：

<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

使用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元素理想情况下位于页面底部

Answer 2

为此，您需要某种存储空间。让我们试试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>

如何保留使用JS onclick函数

2 个答案: