javascript - Why I always get "Uncaught SyntaxError: Unexpected token u " from Chrome?

Question

I have spent a whole day on this, googling and searching for answers but still could not figure out.

My code is a bit long and it works well in Firefox but gets "Uncaught SyntaxError: Unexpected token u " from Chrome.

Can anyone points me out where I am wrong? Thanks in advance!

// when the page loads, list all the current contacts
$(document).ready(function(){

    // check if localStorage database exists
    if(!localStorage.getItem("customerDatabase")){

        // define a JSON object to hold all current address
        var contacts = {
            "users":[
                {
                    "id":"1",
                    "name":"dennis",
                    "email":"[email protected]"
                },
                {
                    "id":"2",
                    "name":"zoe",
                    "email":"[email protected]"             
                }
            ]   
        } // end of contacts JSON object

        // stringify the object 
        var stringObject = JSON.stringify(contacts);                

        // store it into localStorage database
        var storedDatabase = localStorage.setItem("customerDatabase", stringObject);                                            

    } else {
        // list all customers upon page loads
        listJSONCustomers();        
    }   

    // list all current contacts from JSON object in localStorage
    function listJSONCustomers(){

      var displayHTML = "";
      var i;

      // get the data from localStorage
      var storedDatabase = localStorage.getItem("customerDatabase");

      // parse the data from string to JSON object
      var parseObject = JSON.parse(storedDatabase); 

      // access the users key of the JSON object
      var userObject = parseObject.users;

      // get the length of the object (how many customers the database has)
      var contactsLength = userObject.length;     

      for(i=0; i<contactsLength; i++){
          var trElement = '<tr id="address' + (i+1) + '">';
          var tdId = '<td id="id' + (i+1) + '">' + userObject[i].id + '</td>';
          var tdName = '<td id="name' + (i+1) + '">' + userObject[i].name + '</td>';
          var tdEmail = '<td id="email' + (i+1) + '">' + userObject[i].email + '</td>';
          var tdButton = '<td id="button"><button id="editButton' + userObject[i].id + '">Edit</button> | <button id="deleteButton' + userObject[i].id + '">Delete</button></td>';

          displayHTML += trElement + tdId + tdName + tdEmail + tdButton + '</tr>';
      }     

      $('#address_list').html(displayHTML);           
    }       

    // add customer to database  
    $('#saveCustomer').click(function(){

       if( $('#customerName').val() !== "" && $('#customerEmail').val() !== "" ){

           var customerName = $('#customerName').val();
           var customerEmail = $('#customerEmail').val();

           // get the data from localStorage
           var storedDatabase = localStorage.getItem("customerDatabase");

           // parse the data from string to JSON object
           var parseObject = JSON.parse(storedDatabase);    

           // access the users key of the JSON object
           var userObject = parseObject.users;     

           // get the new entry
           var newCustomerObject = {
                                  "id": userObject.length + 1,
                                  "name": customerName,
                                  "email": customerEmail
                                  };

           // push the new entry into the object                                                            
           userObject.push(newCustomerObject);

           // convert the object into string for localStorage
           var stringObject = JSON.stringify(parseObject);         

           // store the JSON object into localStorage
           var storedDatabase = localStorage.setItem("customerDatabase", stringObject);

           // list all customes again every time a database receives a new entry
           listJSONCustomers();     

       } else {
          alert("Please enter customer's name and email.");  
       }

    }); // end of $('#saveCustomer').click();


});

Answer 1

At some point, something you did corrupted the value of your LocalStorage for that key. LocalStorage can only store strings, so if you pass anything else to it, it will convert it to a string. Since your value is 'undefined', that means that at some point, you probably did something like this on accident:

var value;
localStorage.setItem('key', value);

In this case, value is undefined, which is not a string. When this gets saved, it will be converted however. Unfortunately, "undefined" is not valid JSON. That means that when it tries to parse, it will throw an exception.

To fix your issue, you should clear the bad value out with removeItem.

localStorage.removeItem("customerDatabase");