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

如何在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中是可能的吗？

试试这段代码，它会正常工作。

<!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>

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

一个简单的例子是这样的（代码笔上的工作示例）：

// 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 );
} );

变量在

窗口关闭后失去其值。您可以使用 Cookie 在浏览器中存储数据

  document.cookie = "text=" + text;

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

如果您想了解有关 Cookie 的更多信息，请阅读此内容

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

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

相关内容

最新更新

热门标签：