Local storage has the limitation of being able to store only a single object at a time, rather

Question

Local storage has the limitation of being able to store only a single object at a time, rather

This code is designed to store product details in a local storage variable whenever a user visits a product page, with the intention of remembering the last visited products. However, the variable currently only retains one product at a time instead of adding them with "|" separators. Any assistance in resolving this issue would be greatly appreciated. The code appears to be valid.

Best regards

    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('|'));
    });

javascript local-storage

Answer 1

Answer №1

Alright, this solution should work just fine,
and it's nice that Array.concat() handles both Arrays and single values.

events.domReady( function() {
    var objViewed = {
        '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 = [ objViewed ].concat(
            tryToParseAsJson( lvp ) || []
        )
        .filter(function(obj){ 
            return obj === objViewed || obj.name !== objViewed.name 
        })
        .slice(0, 4);

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

function tryToParseAsJson(str){
    try {
        return JSON.parse(str);
    }catch(err){}
}

Update: Consider creating an abstraction if multiple parts of the code need to access localStorage, to centralize the serialization/deserialization process.

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

var store = {
    lvp: {
        get(){
            return AP.concat( tryToParseAsJson( window.localStorage.getItem('lvp') ) || AP );
        },
        set(arr){
            window.localStorage.setItem('lvp', 
                arr == null || typeof arr !== "object"? "": JSON.stringify( arr )
            );
        }
    }
}

Ensure all code uses this module only.

events.domReady(function() {
    var objViewed = {
        '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 isNotObjViewed(o){
        return o.name !== objViewed.name 
    }

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

Answer 2

Alright, this solution should work just fine,
and it's nice that Array.concat() handles both Arrays and single values.

events.domReady( function() {
    var objViewed = {
        '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 = [ objViewed ].concat(
            tryToParseAsJson( lvp ) || []
        )
        .filter(function(obj){ 
            return obj === objViewed || obj.name !== objViewed.name 
        })
        .slice(0, 4);

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

function tryToParseAsJson(str){
    try {
        return JSON.parse(str);
    }catch(err){}
}

Update: Consider creating an abstraction if multiple parts of the code need to access localStorage, to centralize the serialization/deserialization process.

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

var store = {
    lvp: {
        get(){
            return AP.concat( tryToParseAsJson( window.localStorage.getItem('lvp') ) || AP );
        },
        set(arr){
            window.localStorage.setItem('lvp', 
                arr == null || typeof arr !== "object"? "": JSON.stringify( arr )
            );
        }
    }
}

Ensure all code uses this module only.

events.domReady(function() {
    var objViewed = {
        '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 isNotObjViewed(o){
        return o.name !== objViewed.name 
    }

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

Local storage has the limitation of being able to store only a single object at a time, rather

Answer №1

Similar questions

Is it possible to view the list of errors displayed by vscode when opening a JS file exclusively through the terminal?

In JavaScript, what is the best way to target the initial option element in HTML?

Array filtering functions similarly to marketplace filtering tools

Is there a way to remove the initial word from a sentence?

Filtering in AngularJS based on a specific ID

JS/Docker - The attribute 'user' is not recognized in the context of 'Session & Partial<SessionData>'

Upcoming Authentication Update: Enhancing User Profile with Additional Data Points

The form will only display results after the "Submit" button is clicked twice

How to declare WinJS.xhr as a global variable in a Windows 8 Metro app

Optimal utilization of JSON in JavaScript API: Enhancing Performance, Reinforcing Maintainability, and Optimizing Resources

Using the jqLite .html() method directly as a watch listener in AngularJS

AngularJS implementation that disables a button when the input field is empty

Obtaining numerous data points in a multi-select element within HTML

How to retrieve a refined selection of items

Can the submit ID value be utilized in PHP?

Store the information in the user interface of React by converting it into a file format

How can I trigger an API call 30 seconds after my React Native app switches to the background?

The POST variable consistently remains void

The default locale for momentJS is set to zh-tw and I'm having trouble changing it

Ways to align div elements