Question

如何在HTML或JavaScript中输出某些变量的值？

我的手机上有这个html文件：

 text = "";
    function Show(x)
       {
       text = text + " " + x;
       document.getElementById("Line").innerHTML = text;
       }

    
    .GoToPanelButtons {
        color: maroon;
        background:pink;
        font-size:72px;
    }

    <div>Click randomly on any of these buttons:</div>
    <button class="GoToPanelButtons" onclick="Show('cat')">cat</button>
    <button class="GoToPanelButtons" onclick="Show('dog')">dog</button>
    <button class="GoToPanelButtons" onclick="Show('rat')">rat</button>
    <br>
    <br>
    <div>Here is what you've clicked on:</div>
    <br>
    <div id="Line">---</div>

我希望能够返回我在这里输入的内容 - 这是代码中变量x的内容 - 在我关闭手机后。但是，如果我将其关闭然后再将其打开，则变量为空白，无论我输入的是什么都消失了。

我在StackOverflow上看过类似的问题，但似乎“输出”就意味着只是显示。

输出我在谈论HTML或JavaScript的可能性吗？

Answer 1

您可以轻松使用localStorage.setItem和localStorage.getItem

一个简单的例子是like this (working example on codepen)：

// Check for localStorage support
if ( !window.localStorage ) {
  alert( 'No support for localStorage :(' );
}
// If supported, load localStorage item
else {
  const id = getClicked();
  id && document.querySelector( '#' + id ).classList.add( 'clicked' );
}

function saveClicked( id ) {
  localStorage.setItem( 'buttonId', id );
}

function getClicked() {
  return localStorage.getItem( 'buttonId' );
}

document.addEventListener( 'click', ( e ) => {
  if ( e.target.tagName !== 'BUTTON' ) {
    return;
  }

  // Remove current clicked class
  const current = document.querySelector( '.clicked' )
  if ( current ) {
    current.classList.remove( 'clicked' );
  }

  // Add clicked class on button and save it in localStorage.
  e.target.classList.add( 'clicked' );
  saveClicked( e.target.id );
} );

Answer 2

尝试使用此代码，它将完美无缺。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>Click randomly on any of these buttons:</div>
<button class="GoToPanelButtons" onclick="Show('cat')">cat</button>
<button class="GoToPanelButtons" onclick="Show('dog')">dog</button>
<button class="GoToPanelButtons" onclick="Show('rat')">rat</button>
<button class="GoToPanelButtons" onclick="Clear()">Clear</button>
<br>
<br>
<div>Here is what you've clicked on:</div>
<br>
<div id="Line">---</div>

<script>
    function Show(x) {
        if(localStorage.text){
            localStorage.text = localStorage.text +" "+ x;
        }else{
            localStorage.text = x;
        }
        document.getElementById("Line").innerHTML = localStorage.text;
    }
    function Clear(){
        localStorage.clear();
        document.getElementById("Line").innerHTML = '';
    }
    Show('');
</script>
</body>
</html>

Answer 3

窗口关闭后，变量松开它们的值。您可以使用cookie将数据存储在浏览器中

  document.cookie = "text=" + text;

您需要编写一个函数来获取该cookie。

Read this if you want more info on cookies

Answer 4

本地存储可用于在客户端（即正在查看html的设备）上存储该信息。

Ajax +服务器端html生成可用于在服务器端存储该信息，其好处是可以将其提供给其他人

如何在HTML或JavaScript中输出变量值？

4 个答案: