以json的形式存储localstorage值

Question

您好，我正在尝试在本地存储中保存一些 input[type="text"] 和 input[type="hidden"] 值。下面是JS：

$('.proceed_btn').on('click', function(){

    $('input[type="text"]').each(function(){    
      var id = $(this).attr('id');
      var value = $(this).val();
      localStorage.setItem(id, value);
    }); 
    $('input[type="hidden"]').each(function(){    
      var id = $(this).attr('id');
      var value = $(this).val();
      localStorage.setItem(id, value);
    }); 

});

价值得到完美存储。但我想以 json 格式存储这些值。但是如何将这两个值保存在一个变量中。例如：

order: {
   id: '', 
   product: '',
   service: '',
   name: ''
} 

我已经检查了 JSON 字符串化，但是如何同时使用不同类型的输入来实现

Answer 1

只需构建一个对象，然后stringify 它。例如，如果我假设您的 input 元素的 name 是您要在对象上使用的名称：

$('.proceed_btn').on('click', function(){
    // Blank to start with
    var order = {};

    // Loop through all inputs...
    $('input[type="text"], input[type="text"]').each(function(){
      // ...adding their values as properties
      order[this.name] = this.value;
    }); 

    // Store that object in JSON format
    localStorage.setItem("order", JSON.stringify(order));
});

稍后，如果您想检索它并根据其值设置输入：

var order = JSON.parse(localStorage.getItem("order") || "null");
if (order) {
    $('input[type="text"], input[type="text"]').each(function(){
        if (this.name in order) {
            this.value = order[this.name];
        } else {
            this.value = "";
        }
    });
}

Answer 2

写localstorage的时候只有2个参数：

例如。 localStorage.setItem('汽车', 汽车); 第一个参数实际上是键，第二个参数是值；

你传递了 3 个错误的参数。

如果您可以在本地存储中存储多个值，请创建该值的对象并将该对象写入本地存储：

ex.

var car = {};
car.wheels = 4;
car.doors = 2;
car.sound = 'vroom';
car.name = 'Lightning McQueen';
console.log( car );
localStorage.setItem('car', JSON.stringify(car));
console.log( JSON.parse( localStorage.getItem( 'car' ) ) );

Answer 3

我认为这会有所帮助。

var objectToSave = {};
$('.proceed_btn').on('click', function(){

$('input[type="text"],input[type="hidden"]').each(function(){
  var elem = $(this);
  var id = elem.attr('id');
  var value = elem.val();
  objectToSave[id] = value;
}); 
  localStorage.setItem('order', JSON.stringify(objectToSave));
});