加载表单数据到字符串然后到localStorage的最佳方式是什么?

What is the optimal way to load form data into a string and then to localStorage?

本文关键字：方式 最佳 是什么 然后 表单 数据 字符串 加载 localStorage      更新时间：2023-09-26

这是加载表单数据到字符串然后到localStorage的最佳方式吗?

这是我自己想出来的，我不擅长编程。它可以满足我的需要，但我不确定这是不是一个防弹密码?

<script>
    var sg = document.getElementById("selectedGateway");
    var sd = document.getElementById("selectedDestination");
    var dm = document.getElementById("departureMonth");
    var dd = document.getElementById("departureDay");
    var dy = document.getElementById("departureYear");
    var rm = document.getElementById("returnMonth");
    var rd = document.getElementById("returnDay");
    var ry = document.getElementById("returnYear");
    var ad = document.getElementById("adults");
    var ch = document.getElementById("option2");
    $("#searchRequestForm").submit(function() {
        var string = 'From: ' + sg.value + ' 'nTo: ' + sd.value + ' 'nDeparture: ' + dm.value + '/' + dd.value + '/' + dy.value + ' 'nReturn: ' + rm.value + '/' + rd.value + '/' + ry.value + ' 'nNumber of adults: ' + ad.value + ' 'nNumber of children: ' + ch.value;
        localStorage.setItem("string", string);
    });
</script>

我将使用类似下面的东西，这样我就可以处理一个对象及其属性，而不是一个大字符串。请注意，除了jQuery选择器之外，这是纯JavaScript。

演示:

http://jsfiddle.net/grTWc/1/

var data = {
    sg: $("#selectedGateway").val(),
    sd: $("#selectedDestination").val()
    // items here
};
localStorage.setItem("mykey", JSON.stringify(data));

检索数据:

var data = JSON.parse(localStorage["mykey"]);
alert(data.sg);

参见:

  • https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify
  • http://api.jquery.com/jQuery.parseJSON/

我更喜欢表驱动的方法，这样就没有重复的代码(DRY):

var ids = [
    "selectedGateway", "From: ", 
    "selectedDestination", "'nTo :",
    "departureMonth", "'nDeparture: ", 
    "departureDay", "/",
    "departureYear", "/",
    "returnMonth", " 'nReturn: ",
    "returnDay", "/",
    "returnYear",  "/",
    "adults", " 'nNumber of adults: ",
    "option2", " 'nNumber of children: "];
var submitStr = "";
for (var i = 0; i < ids.length; i+=2) {
    submitStr += ids[i+1] + document.getElementById(ids[i]).value;
}
localStorage.setItem("string", submitStr);

你可以定义一个像下面这样的函数来直接通过id获取值，这样当你构建你的字符串时就会更简单。

function form(id) {
    return document.getElementById(id).value;
}
相关文章：