这个 jStorage 对象有什么不同，为什么？

Question

我在一家电子商店工作，其中插入购物篮的商品被插入到名为 BasketItemNumber_I 的 jStorage 键中 [其中 I 是一个 int，其他所有商品的名称中都有 i++]。

示例：BasketItemNumber_1、BasketItemNumber_2 等..

现在，我的客户要求我添加一个输入，其中一个项目的件数，以便客户可以更改 int 而无需使用 + 1 和 - 1 函数。

假设我的篮子里有一件物品。当我在控制台中回显这个项目时，它看起来像这样：

现在，目标是将对象的 piece 值更改为用户已写入输入的值，因此该项目具有如下所示的 onfocusout 函数：

function onFocusOutFunction(jStorageItemName, i) {

console.log(jStorageItemName + " Focus Out");
var jStorageFocusedOutBasketPiece =  $.jStorage.get(jStorageItemName);

console.log("jStorageFocusedOutBasketPiece: " + jStorageFocusedOutBasketPiece[0].piece);
var inputFocusedOutBasketPiece = document.getElementById('pieceInput_' + i).value;
inputFocusedOutBasketPiece = inputFocusedOutBasketPiece.replace(/\D/g,'');
console.log("inputFocusedOutBasketPiece: " + inputFocusedOutBasketPiece);

function isNumber(obj) { return !isNaN(parseFloat(obj)) }

console.log(isNumber(inputFocusedOutBasketPiece));


if (inputFocusedOutBasketPiece == jStorageFocusedOutBasketPiece[0].piece){
  console.log("Values are the same");
}else {

  console.log("Values are not the same, therefore piece value will be changed");

  console.log("Before change");
  console.log(jStorageFocusedOutBasketPiece);

  jStorageFocusedOutBasketPiece[0].piece = parseInt(inputFocusedOutBasketPiece);

  $.jStorage.set(jStorageItemName, jStorageFocusedOutBasketPiece[0]);
  $.jStorage.setTTL(jStorageItemName, 604800000);

  console.log("After the change");
  console.log(jStorageFocusedOutBasketPiece);

  console.log("After jStorage set");
  console.log(jStorageItemName);
  console.log($.jStorage.get(jStorageItemName));

  window.location.assign('basket.php');

}

}

但是，每当我更改值时（以便此函数可以执行此操作）。 BasketItemNumber_1 的输出如下所示：

该项目不再列在购物篮中，因为我必须使用这部分代码对其进行检查：（我知道我使用 eval，这是一种不好的做法，我计划稍后更改它，现在我需要完成概念验证，而不是实际产品）。

for (var i = 1, len = jStorageIndex.length; i < len; i++){


jStorageItemContents =  eval("$.jStorage.get('BasketItemNumber_" + i + "')");
jStorageItemName     = "BasketItemNumber_" + i


if (typeof jStorageItemContents == "undefined" || !    (jStorageItemContents instanceof Array)) {

console.log("An array is empty, skipping.");

}else {


if(jStorageItemContents[0].active == "true"){

...等等。

基本上，我没有看到任何项目，但我在控制台中看到 "An array is empty, skipping"。

我不得不使用上面的逻辑，因为有时 BasketItems 是空的（在用户删除它们之后，它们的空数组有时会保留在缓存中）因此我只想显示那些实际包含一些东西的。

因此我不得不问：究竟是什么、如何以及为什么改变了对象的表示方式？

我看到不同之处在于它们在控制台中的输出方式，更具体地说是在 [] 和 {} 中，但我不明白是什么使这种变化成为可能以及如何进行：

我宁愿在 piece 值更改后更改对象的表示方式以匹配它曾经拥有的格式，这样我就不必弄乱上面的 typeof 逻辑，因为还有其他事情也靠它。

注意：还有一个+和-按钮，分别改变棋子的数值。

这些函数是：

$(document).on('click', '#addPieceButton', function(){

var variable = $(this).attr('itemname');
var variable = variable.toString();

var basketItem = $.jStorage.get(variable);


basketItem[0].piece = parseInt(basketItem[0].piece) + 1;
console.log(basketItem[0].piece);

  $.jStorage.set(variable, basketItem);
  $.jStorage.setTTL(variable, 604800000);

  console.log($.jStorage.get(variable));

     location.reload(true);




});

$(document).on('click', '#removePieceButton', function(){

 var variable = $(this).attr('itemname');
 var variable = variable.toString();

 var basketItem = $.jStorage.get(variable);

basketItem[0].piece = parseInt(basketItem[0].piece) - 1;

if(basketItem[0].piece == 0){ //If there is 0, we will show the warning

    if (window.confirm("By changing the pieces to 0 the item will disappear? Do you want to continue?")) {

      //This will change the active to false, thanks to which it will be no longer displayed
      for (var i in basketItem) {
        if (basketItem[i].active == "true") {
          basketItem[i].active = "false";
          break; //Stop this loop, we've found it!
     }
  }
      $.jStorage.set(variable, basketItem);
      $.jStorage.setTTL(variable, 604800000);

      console.log($.jStorage.get(variable));

         location.reload(true);

  }
  else {
    console.log("User answered NO");
    location.reload(true);
  }

}else {


console.log(basketItem[0].piece);

  $.jStorage.set(variable, basketItem);
  $.jStorage.setTTL(variable, 604800000);

  console.log($.jStorage.get(variable));

     location.reload(true);


   }
});

而且它们工作得很好。通过写下来，我不知何故觉得原因在于我没有使用 jQuery 作为我遇到问题的功能。

Answer 1

好的，当您在更改后保存新项目时，您将覆盖原始数组并放入索引 0 处的元素（在下一行）：

$.jStorage.set(jStorageItemName, jStorageFocusedOutBasketPiece[0]);

这就是它此时不再是数组的原因。
您可能只想替换存储中的相关项，然后重新设置整个数组。简单的去掉索引：

$.jStorage.set(jStorageItemName, jStorageFocusedOutBasketPiece);

现在的情况是您曾经有一个项目列表，后来您将其重写为仅是这些项目中的第一个。

旁注： 你对 eval 的看法是正确的，坦率地说，你没有理由不立即消除它。只需将那部分替换为：

jStorageItemName = 'BasketItemNumber_' + i;
jStorageItemContents = $.jStorage.get(jStorageItemName);

这个 jStorage 对象有什么不同，为什么？

In what way is this jStorage Object different and why?

jquery

object

jstorage