这个jStorage对象以什么方式不同?为什么?

时间:2016-08-24 09:14:24

标签: jquery object jstorage

我正在开设一个电子商店,其中插入篮子的项目被插入名为BasketItemNumber_I的jStorage密钥[其中我是一个int而其他所有项目都以名称获得i ++]。

示例:BasketItemNumber_1,BasketItemNumber_2等。

现在,我的客户端要求我添加一个输入,其中项目的数量将是,所以客户端可以更改int而无需使用+ 1和-1函数。

我们说我在篮子里面有一件物品。当我在控制台中回显此项时,它看起来像这样:

Console echo in Chrome before the change

现在,目标是将对象的片段值更改为用户已写入输入的片段值,因此该项目具有如下所示的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的输出如下所示:

Console echo in Chrome after the change

该项目不再列在篮子里,因为我必须用这部分代码检查它:(我知道我使用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"){

......等等。

基本上,我没有看到一个项目,但我看到&#34;数组是空的,跳过&#34;在控制台中。

我必须使用上面的逻辑,因为有时BasketItems是空的(在用户删除它们之后,它们的空数组有时会保留在缓存中)因此我只想显示实际包含某些内容的那些。

因此我不得不问:什么,如何以及为什么确切地改变了对象的表示方式?

我看到区别在于它们在控制台中的输出方式,更具体地说是[]和{},但我不明白,是什么让这种改变成为可能以及如何继续:

我宁愿在更改片段值之后更改Object的表示方式以匹配它曾经具有的格式,这样我就不必弄乱上面的逻辑类型,因为还有其他依赖的东西它也是。

注意:还有一个+和 - 按钮,分别改变了片段值。

这些功能是:

$(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来解决我遇到的问题。

1 个答案:

答案 0 :(得分:1)

好的,当您在更改后保存新项目时,您将覆盖原始数组并将元素放在索引0处(在以下行):

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

这就是为什么它在这一点上不再是一个阵列 您可能只想替换存储中的相关项,并再次设置整个数组。简单地删除索引:

$.jStorage.set(jStorageItemName, jStorageFocusedOutBasketPiece);

发生了什么事情,你曾经有过一个项目清单,然后你把它改写成这些项目中的第一项。

旁注: 你对eval是正确的,坦率地说你没有理由不立即消除它。只需用以下内容替换该部分:

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