Question

以下代码的想法是，每当有人访问产品页面时，都会向localstorage变量添加一些产品详细信息，目的是记住上次访问过的产品。但是，该变量只存储一个产品，而不是添加＆＃34; |＆＃34;分离器相继。希望有人可以帮忙。代码似乎是合法的。

此致

    events.domReady( function() {
      var objLookedAt = {
        'name' : document.getElementById('name').innerHTML.trim(),
        'type' : document.getElementById('type').innerText.trim(),
        'uri' : location.href,
        'imgUri' : document.getElementById('productImg').src,
        'price' : document.querySelectorAll('#prodPrice > span')[0].innerHTML.trim(),
        'quantity' : document.querySelectorAll('#prodPrice > span')[1].innerHTML.trim()
      },
      cRead = window.localStorage.getItem('lvp'),
      stringToSave = JSON.stringify( objLookedAt ),
      obj, ind, currSave = [], seen = false;

      if(cRead) {
        currSave = cRead.split('|');
        for(var i = 0; i < currSave.length; i++) {
          obj = JSON.parse(currSave[i]);
          if(objLookedAt.name === obj.name) {
            seen = true;
            ind = i;
          }
        }
      }
      if( seen ) {
        currSave.splice(ind, 1);
      }
      currSave.reverse().push(stringToSave);
      var cRev = currSave.reverse();
      window.localStorage.setItem('lvp', cRev.slice(0, 4).join('|'));
    });

Answer 1

嗯，这应该做的工作，
和Array.concat（）为您管理数组和单个值。

events.domReady( function() {
    var objLookedAt = {
        'name' : document.getElementById('name').innerHTML.trim(),
        'type' : document.getElementById('type').innerText.trim(),
        'uri' : location.href,
        'imgUri' : document.getElementById('productImg').src,
        'price' : document.querySelectorAll('#prodPrice > span')[0].innerHTML.trim(),
        'quantity' : document.querySelectorAll('#prodPrice > span')[1].innerHTML.trim()
    };

    var lvp = window.localStorage.getItem('lvp');
    var cRev = [ objLookedAt ].concat(
            //JSON.parse( lvp || "[]" )     //this should actually be fine,
            tryToParseAsJson( lvp ) || []   //but safety first
        )
        .filter(function(obj){ 
            return obj === objLookedAt || obj.name !== objLookedAt.name 
        })
        .slice(0, 4);

    window.localStorage.setItem('lvp', JSON.stringify( cRev ));
});

//may be handy in different places
function tryToParseAsJson(str){
    try {
        return JSON.parse(str);
    }catch(err){}
}

编辑：如果您有多个地方必须访问localStorage，请构建一个抽象，并将序列化/反序列化任务留给此抽象。

//utils
var AP = Array.prototype;
function tryToParseAsJson(str){
    try {
        return JSON.parse(str);
    }catch(err){}
}

//an abstraction for the local storage.
//change all code to use this abstraction, leave all the serialization to this module
var store = {
    //you might want to extend that, so that this module does everything involving the localStore
    lvp: {
        //always returns an Array, although it may be empty
        get(){
            return AP.concat( tryToParseAsJson( window.localStorage.getItem('lvp') ) || AP );
        },

        //expects an Array of objects, 
        //also works if you only pass one item (through the parsing-process)
        set(arr){
            window.localStorage.setItem('lvp', 
                arr == null || typeof arr !== "object"? "": JSON.stringify( arr )
            );
        }
    }
}

您的代码仅使用此模块

events.domReady(function() {
    var objLookedAt = {
        'name' : document.getElementById('name').innerHTML.trim(),
        'type' : document.getElementById('type').innerText.trim(),
        'uri' : location.href,
        'imgUri' : document.getElementById('productImg').src,
        'price' : document.querySelectorAll('#prodPrice > span')[0].innerHTML.trim(),
        'quantity' : document.querySelectorAll('#prodPrice > span')[1].innerHTML.trim()
    };

    function isNotObjLookedAt(o){
        return o.name !== objLookedAt.name 
    }

    store.lvp.set( [ objLookedAt ].concat( store.lvp.get().filter( isNotObjLookedAt ).slice(0,3) ) );
});

localstorage只存储一个对象，而不是添加连接它们

1 个答案: