如何防止刷新后内容消失

Question

新年快乐，所以，我正在用 HTML 做一个计算器。 CSS 和 JS。 我希望input中的内容即使在刷新页面后也不会消失。 我想不通，想要一些帮助。 我没有在计算器中添加很多逻辑，所以请忽略它。

下面是代码：

HTML

<html>
<body>
    <main>
        <input type="text" id="field" maxlength="11">
        <table>
            <tr>
                <td onclick="type('%')">%</td>
                <td onclick="text.value=''">C</td>
                <td onclick="type(')')">)</td>
                <td onclick="type('÷')">÷</td>
            </tr>
            <tr>
                <td onclick="type('7')">7</td>
                <td onclick="type('8')">8</td>
                <td onclick="type('9')">9</td>
                <td onclick="type('×')">×</td>
            </tr>
            <tr>
                <td onclick="type('4')">4</td>
                <td onclick="type('5')">5</td>
                <td onclick="type('6')">6</td>
                <td onclick="type('-')">-</td>
            </tr>
            <tr>
                <td onclick="type('1')">1</td>
                <td onclick="type('2')">2</td>
                <td onclick="type('3')">3</td>
                <td onclick="type('+')">+</td>
            </tr>

            <tr>
                <td onclick="type('(-')">+/-</td>
                <td onclick="type('0')">0</td>
                <td onclick="type('.')">.</td>
                <td>=</td>
            </tr>
        </table>
    </main>
</body>
<html>

CSS

* {
   margin: 0;
   padding: 0;
   color: white;
}


body {
   background-color: black;
   display: flex;
   justify-content: center;
   transform: translateY(50%);
}
    
input {
   background-color: transparent;
   border: 1px solid white;
   width: 250px;
   height: 70px;
   margin-bottom: 20px;
   font-size: xx-large;
   text-align: right;                    
}

td {
   width: 60px;
   height: 60px;
   text-align: center;
   border-radius: 50%;
   border: 1px solid white;
   cursor: pointer;
   font-weight: bold;
   font-size: larger;
}

td:hover {
   color: black;
   background-color: white;
}

JavaScript

var text = document.getElementById("field");
function type(word) {
  text.value += word;
}

Answer 1

当您刷新页面时，输入将始终被清除。 保留输入值的一种简单方法是使用localStorage API。

这篇文章可能会有所帮助。

如何防止刷新后内容消失

问题描述

1 个解决方案

解决方案1
0 2022-01-01 13:52:33

如何防止刷新后内容消失

问题描述

1 个解决方案

解决方案1 0 2022-01-01 13:52:33

解决方案1
0 2022-01-01 13:52:33