时间戳

首页 > 解决方案 > GitHub Pages 网站中有没有办法在会话之间存储文本框的内容？

javascript - GitHub Pages 网站中有没有办法在会话之间存储文本框的内容？

问题描述

我想要做的是，当有人导航到我的网站时，它会询问他们的姓名，或者只是有一个通用名称并说“不是你，请单击此处”。之后，在角落里会显示“欢迎回来，[name]”。然而，这是一个 GitHub Pages 网站，所以我不确定这是否可能，它必须简单地省略名称。

它确实可以简单地硬编码一个名称或根本没有名称，但没有某种数据库或存储和检索凭据的能力，我不知道如何实现这一点。

我目前在网页上的所有内容是

<p style="text-align:right; color:gray"><i>Welcome back.</i></p>.

我无法在 Google 上找到与我的问题类似的内容，我不确定如何用词来表达它，除了那些不太能让我明白我要去哪里的关键字。

我不相信网站可以在没有某种 cookie 的情况下写入用户系统，但我对使用它们存储数据知之甚少。我猜我需要利用 HTML5 window.LocalStorage，但我不确定如何实现它。

本质上，有没有办法将某人的姓名存储在 cookie、网站缓存或不在服务器端的某个地方，因为我可以告诉 GitHub Pages 是只读的。

标签： javascripthtml

解决方案

正如评论中所指出的，localstorage（或 cookie）是在没有自己的服务器或某些外部服务的情况下做你想做的事情的唯一方法。

这绝不是一个永久的存储解决方案，您无法控制用户如何管理他们的本地存储，但这是一个最小的示例，您可以将其放入 HTML 文件并在浏览器中打开以进行测试。

<input id="local-input" onkeydown="store(this)">

<script>
    // keep the contents of the input in local storage, called by input onkeydown
    function store(e) {
        localStorage.setItem('local', e.value)
    }

    // if previous storage exists, use it
    if(localStorage.getItem('local') !== null) {
        document.getElementById('local-input').value = localStorage.getItem('local')
    }
</script>

本地存储非常易于使用。有关更多示例和指导，请参阅在线文档：MDN Window.localStorage

推荐阅读