3 Replies - 557 Views - Last Post: 26 July 2014 - 11:49 PM

#1 andynov123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 24-May 11

localStorage item conflicting with other localStorage item

Posted 26 July 2014 - 03:57 PM

I'm having an issue when adding the pricing to localStorage to other fields. If I set the price for the beforeNoonNPSlot to 2, but I leave the field blank for the matineeNPSlot(it should keep whatever price was assigned to it last) Then after I update the changes. The Before Noon Price is $2.00 like it should be, but the matineeNPSlot is $NaN like image attached. What's causing the $NaN and how do I prevent this?

function updatePricingFunction()
 {
var beforeNoonFieldChange = document.getElementById('beforeNoonNPSlot').value;
var matineeFieldChange = document.getElementById('matineeNPSlot').value;

localStorage.setItem('text', beforeNoonFieldChange);
localStorage.setItem('text1', matineeFieldChange);


 }
 
 function load(){
	 var storedValue = localStorage.getItem('text');
	 var storedValue1 = localStorage.getItem('text1');

		beforenoonprice = storedValue;
		 matineeprice = storedValue1;
		  beforeNoonCPSlot.innerHTML = "$" + parseFloat(storedValue).toFixed(2);
		$("#beforeNoonPrice").attr = parseFloat(storedValue).toFixed(2);
		
$('#beforeNoonPrice').append("$" + (storedValue * 1).toFixed(2));

 matineeCPSlot.innerHTML = "$" + parseFloat(storedValue1).toFixed(2);
		$("#matineePrice").attr = parseFloat(storedValue1).toFixed(2);
		
$('#matineePrice').append("$" + (storedValue1 * 1).toFixed(2));

}



Here's a screenshot of the problem

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: localStorage item conflicting with other localStorage item

#2 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 125
  • View blog
  • Posts: 539
  • Joined: 15-March 14

Re: localStorage item conflicting with other localStorage item

Posted 26 July 2014 - 05:16 PM

NaN means Not a Number and can come from a variety of sources. It would be best to check the value you add to local storage first.

// this may not return a valid number depending on the input type.
var matineeFieldChange = document.getElementById('matineeNPSlot').value;

// You can check with isNaN returns true if not a number (is Not a Number)
if( isNaN( matineeFieldChange ) ){
    window.alert("matineeFieldChange is Not a Number NaN");
}


Also localStorage only stores strings so be aware that the value returned from local storage may not be a number if it was incorrectly added.

I much prefer when using localStorage to parse all data as a JSON string. That way it is easier to maintain types. To do this create an object to hold the data and then JSON.stringify it to store it and JSON.parse it to read it.

// the data object containing data you want
var myData = {
           myValue: 100,
           myString: "hello",
           myBool: true};

// to store the data
localStorage["myStoreddata"] = JSON.stringify(myData);  // data is now stored in local storage as a JSON string



To retrieve the data always first check if the local storage you are after exists. Using .getItem() will return null which is the same as 0. I do not like it as it is inconsistent with javascripts undefined object that the default value for any undefined object, not null.

if(localStorage["myStoreddata"] !== undefined){                  // does this store exist      
          myData = JSON.parse( localStorage["myStoreddata"] );   // yes parse the json string      
         // now mydata has your data and the basic types remain as they are.
}else{     
         ...fall back code if the local store does not exist...
}




JSON strings are very handy for storing data in local storage. You can store very complex objects with a very simple code. It does take up more space but if you have a problem with space there are many compression libraries around to help.

// example code using a simple LZ compression library 
var myMillionValues = { ... very complex and long Object ... }
localStorage["myData"] = LZString.compress( JSON.stringify( myMillionValues ) );
myMillionValues = JSON.parse( LZString.decompress( localStorage["myData"] ) );

Was This Post Helpful? 1
  • +
  • -

#3 andynov123  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 33
  • Joined: 24-May 11

Re: localStorage item conflicting with other localStorage item

Posted 26 July 2014 - 10:56 PM

I've been playing with this all day and I tried implementing your code, but I can't get it to work to save my life. If it isn't too much to ask is there any chance you can show me how to get the two variables to play nicely with each other without the NaN appearing?


function updatePricingFunction()
 {
var beforeNoonFieldChange = document.getElementById('beforeNoonNPSlot').value;

// You can check with isNaN returns true if not a number (is Not a Number)
if( isNaN( beforeNoonFieldChange ) ){
    window.alert("matineeFieldChange is Not a Number NaN");
}

// this may not return a valid number depending on the input type.
var matineeFieldChange = document.getElementById('matineeNPSlot').value;

// You can check with isNaN returns true if not a number (is Not a Number)
if( isNaN( matineeFieldChange ) ){
    window.alert("matineeFieldChange is Not a Number NaN");
}
localStorage.setItem('text', beforeNoonFieldChange);
localStorage.setItem('text1', matineeFieldChange);


 }
 
 function load(){
	 var storedValue = localStorage.getItem('text');
	 var storedValue1 = localStorage.getItem('text1');

		beforenoonprice = storedValue;
		 matineeprice = storedValue1;
		  beforeNoonCPSlot.innerHTML = "$" + parseFloat(storedValue).toFixed(2);
		$("#beforeNoonPrice").attr = parseFloat(storedValue).toFixed(2);
		
$('#beforeNoonPrice').append("$" + (storedValue * 1).toFixed(2));

 matineeCPSlot.innerHTML = "$" + parseFloat(storedValue1).toFixed(2);
		$("#matineePrice").attr = parseFloat(storedValue1).toFixed(2);
		
$('#matineePrice').append("$" + (storedValue1 * 1).toFixed(2));

}





Was This Post Helpful? 0
  • +
  • -

#4 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 125
  • View blog
  • Posts: 539
  • Joined: 15-March 14

Re: localStorage item conflicting with other localStorage item

Posted 26 July 2014 - 11:49 PM

I can not see any source of the NaN in the code you have provided. It must be coming from some other part of your project.

I have changed your code a little to make it safer and run quicker. I use bracket notation when accessing local storage. I have provide both methods in snippet, Only use one, its up to you which you prefer.

<script>
function updatePricingFunction() {
    var beforeNoonFieldChange = document.getElementById('beforeNoonNPSlot').value;
    
    // You can check with isNaN returns true if not a number (is Not a Number)
    if (isNaN(beforeNoonFieldChange)) {
        window.alert("matineeFieldChange is Not a Number NaN");
    }
    
    // this may not return a valid number depending on the input type.
    var matineeFieldChange = document.getElementById('matineeNPSlot').value;
    
    // You can check with isNaN returns true if not a number (is Not a Number)
    if (isNaN(matineeFieldChange)) {
        window.alert("matineeFieldChange is Not a Number NaN");
    }
    
    // I prefer bracket notation
    localStorage['text'] =  beforeNoonFieldChange;
    localStorage['text1'] =  matineeFieldChange;
    
    // or you can do it the setter way (runs slower)
    localStorage.setItem('text', beforeNoonFieldChange);
    localStorage.setItem('text1', matineeFieldChange);
    
}

function load() {

    // two options depending on what method you prefer.

    //-------------------------------------------------------------------
    // Bracket notation.
    // declare variables with default values in case local storage is empty
    // or unavailable
    var storedValue = ??? //default value;
    var storedValue1 = ??? //default value

    // I prefer bracket notation to access local storage
    // You MUST!!! check for the existence of localStorage
    if(localStorage['text'] !== undefined){
        storedValue = localStorage['text'];  // Ok to get the value
    }
    if(localStorage['text1'] !== undefined){
        storedValue1 = localStorage['text1']; // ok to get the value
    }
    //-------------------------------------------------------------------
    
    //-------------------------------------------------------------------
    // Getter Method
    // if you prefer to use the getters and setter you still have to check its avalible    
    var storedValue = localStorage.getItem('text');
    if(storedValue === null){
        storedValue = ?  // set your default value
    }
    var storedValue1 = localStorage.getItem('text1');
    if(storedValue1 === null){
        storedValue1 = ?  // set your default value
    }
    //-------------------------------------------------------------------
    
    
    // Ok we have the values now check tat they a safe to use. This can be combined with the 
    // lines above. I just keep it separate to make it clear.
    if(isNaN(storeValue)){
        window.alert("invalide data value one");
        return;  // cant go on so exit function
    }
    if(isNaN(storeValue1)){
        window.alert("invalide data value two");
        return;   // cant go on so exit.
    }

    // values are safe so now convert them from strings to numbers
    // set the precision while we are at it
    storedValue = parseFloat(storedValue).toFixed(2);
    storedValue1 = parseFloat(storedValue1).toFixed(2);
    
    // Set your global variables ???    
    beforenoonprice = storedValue;
    matineeprice = storedValue1;
    
    // assuming you have the correct elements
    beforeNoonCPSlot.innerHTML = "$" + storedValue;
    $("#beforeNoonPrice").attr = storedValue;;
    $('#beforeNoonPrice').append("$" + storedValue);
    
    matineeCPSlot.innerHTML = "$" + storedValue1;
    $("#matineePrice").attr = storedValue1;
    $('#matineePrice').append("$" + storedValue1);
    
}
</script>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1