如何使用 HTML5 本地存储保存表单中的数据

How to save data from a form with HTML5 Local Storage?

本文关键字：表单 数据 保存 存储 何使用 HTML5      更新时间：2023-09-26

我有一个表单可以登录网站，但不在我的网站上，我希望它们使用 HTML5 本地存储将它们保存在我的网络中。但不是如何。知道吗？我的形式是这样的：

<form action="http://issuefy.ca.vu/on/login.php" class="form-login"  method="post" /> 
<input name="email" type="email" id="email" required="" placeholder="Email" />
<input name="password" type="password" required="" placeholder="Contraseña" />
</form>

LocalStorage 有一个 setItem 方法。你可以像这样使用它：

var inputEmail= document.getElementById("email");
localStorage.setItem("email", inputEmail.value);

如果要获取该值，可以执行以下操作：

var storedValue = localStorage.getItem("email");

也可以在单击按钮时存储值，如下所示：

<button onclick="store()" type="button">StoreEmail</button>
<script  type="text/javascript">
  function store(){
     var inputEmail= document.getElementById("email");
     localStorage.setItem("email", inputEmail.value);
    }
</script>

这是一个快速函数，它将<input>、<textarea>等的值存储在本地存储中，并在页面加载时恢复它。

function persistInput(input)
{
  var key = "input-" + input.id;
  var storedValue = localStorage.getItem(key);
  if (storedValue)
      input.value = storedValue;
  input.addEventListener('input', function ()
  {
      localStorage.setItem(key, input.value);
  });
}

输入元素必须指定一个在此函数的所有用法中唯一的id。正是此id标识本地存储中的值。

var inputElement = document.getElementById("name");
persistInput(inputElement);

请注意，此方法添加永远不会删除的事件处理程序。在大多数情况下，这不会成为问题，但应考虑它是否在你的方案中。

在这里，使用JQUERY的简单解决方案是这样的。

var username = $('#username').val();
var password = $('#password').val();
localStorage.setItem("username", username);
localStorage.setItem("password", password);

要保存数据，您必须使用localStorage.setItem 方法并获取您必须使用的数据localStorage.getItem 方法。

这是我

的CMS中的函数，它将所有TEXTAREA和INPUT值保存在"keyup"上并在重新加载时将其放置在正确的元素中。提交表单后，仅从本地存储中删除提交的表单。

将其设置为页面的对接，仅此而已。

(function (mz,cms,parentKey,subKey) {
  setTimeout(function() {
    const storeAll = "textarea,input";
    const formArray = mz.querySelectorAll(storeAll);
    parentKey = window.location.href+"-";
    formArray.forEach((formItem) => {
      if (formItem) {
        subKey = formItem.getAttribute("name");
        var key = parentKey+subKey;
        if (localStorage[key]) {
            var _localStorage = localStorage[key] ;
            formItem.value = _localStorage;
        }
        formItem.addEventListener("keyup", function () {
            var _localStorage = formItem.value;
            var T = formItem.getAttribute("type");
            if (T == "password" || T == "hidden" || T == "submit" || formItem.disabled) {
                //console.log("Ignore: "+formItem.getAttribute("name")); 
                return;
            }
            localStorage.setItem(key, _localStorage);
        } , false);
        formItem;
      }
    }); 
    const submitForm = mz.querySelectorAll("form");
    submitForm.forEach((submitItem) => {
      if (submitItem) {
        submitItem.addEventListener("submit", function (e) {
            // e.preventDefault();
            const formArray = submitItem.querySelectorAll("textarea,input");
            formArray.forEach((formItem) => {
                subKey = formItem.getAttribute("name");
                localStorage.removeItem(parentKey+subKey);
            } , false);
        } , false);
      }
    });
  }, 1);
}(this.document,'','',''));
相关文章：