即使在重新加载页面后如何存储输入值？答案

【问题标题】：How can I store input values even after reloading the page?即使在重新加载页面后如何存储输入值？
【发布时间】：2020-07-16 14:56:45
【问题描述】：

所以我正在执行 JavaScript LAB 任务，我们应该接受用户输入并将其用作画布的尺寸。

我的问题是我们得到了 HTML 来坚持使用（无法修改），其中包含一个提交按钮，该按钮在用户提交其尺寸后重新加载页面。

我的问题是如何在重新加载页面后存储输入值？

HTML 代码：

<!DOCTYPE html>
<html>

<head>
  <title>Pixel Art Maker!</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Lab: Pixel Art Maker</h1>

  <h2>Choose Grid Size</h2>
  <form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
    <input type="number" id="inputWidth" name="width" min="1" value="1">
    <input type="submit">
  </form>

  <h2>Pick A Color</h2>
  <input type="color" id="colorPicker">

  <h2>Design Canvas</h2>
  <table id="pixelCanvas">
  </table>

  <script src="designs.js"></script>
</body>

</html>

【问题讨论】：

你可以在这里试试localStorage
这能回答你的问题吗？ How to set a default value based on user's previous value
通常，您将 html <form> 提交给某个“动作”，因此该值被发送到服务器...... 服务器负责“记住” （“持久”）价值。我能想到的两个选项：1）设置cookie，或2）使用localstorage

标签： javascript html

【解决方案1】：

document.getElementById("inputWidth").value = savedValue("inputHeight");
document.getElementById("inputWidth").value = savedValue("inputWidth");
        
function getValue(t){   
    var id = t.id;  
    var inputValue = t.value; 
    localStorage.setItem(id, inputValue);
}

function savedValue(t){
    if (!localStorage.getItem(t)) {
        return "";
    }
    
    return localStorage.getItem(t);
}

<input type="number" id="inputHeight" name="height" min="1" value="1" onkeyup="getValue(this)"> Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1" onkeyup="getValue(this)">

【讨论】：

【解决方案2】：

您可以使用各种本地存储机制将这些数据存储在浏览器中，例如 Web Storage、IndexedDB、WebSQL（已弃用）和 File API（已弃用且仅在 Chrome 中可用）（以及带有 IE 的 UserData）。

最简单和最广泛支持的是WebStorage，其中您有持久存储 (localStorage) 或基于会话的 (sessionStorage)，它在您关闭浏览器之前一直在内存中。两者共享相同的 API。

例如，当页面即将重新加载时，您可以（简化）执行以下操作：

window.onbeforeunload = function() {
    localStorage.setItem("height", $('#inputHeight').val());
    localStorage.setItem("width", $('#inputWidth').val());
    // ...
}

Web 存储同步工作，所以这可能在这里工作。或者，您可以将每个模糊事件的数据存储在输入数据的元素上。

在页面加载时您可以检查：

window.onload = function() {

    var height= localStorage.getItem("height");
    if (height!== null) $('#inputHeight').val("height");

    // ...
}

如果数据不存在，getItem 返回null。

【讨论】：

谢谢你们所有的方法都很好！ :D

【解决方案3】：

使用本地存储来存储值。本地存储具有检索和存储数据的方法。通常，您将在重新加载时使用 localStorage.getItem()，在保存数据时使用 localStorage.setItem()。

【讨论】：