Not able to fetch table rows from an Array stored in local storage

Question

I have a local storage key name "A" which contains an array of table rows. When I alert the whole array it shows [object HTMLTableRowElement],[object HTMLTableRowElement]

But when I loop over the array I am not getting the object in my variable, instead I get [ only.

How to properly fetch the table row objects from the array.

Here is my code :

  if (localStorage.getItem("A") !== null) {

        var lArray = localStorage.getItem("A");
        alert(lArray);   // alerts [object HTMLTableRowElement],[object HTMLTableRowElement]
        for(var i=0 ; i < lArray.length ; i++)
        {
            alert(lArray[i]);   // alerts [
        }

    }

And here is how I am putting the table rows in my local storage

 var favA = [];
 function addRow()
 {
    var tableRow = document.createElement("TR");
    var trID = "Tr";
    tableRow.setAttribute("id", trID);

    favA.push(tableRow);    

    if (typeof(Storage) !== "undefined") {
        localStorage.setItem("A", favA);

    }

are you stringifying before putting into storage? I don't think inserting raw objects into localStorages work — Carafini, Nov 08 '16 at 03:06
No, should I stringify the TableRow object before putting it in local storage? — parul71625, Nov 08 '16 at 03:07
see http://stackoverflow.com/questions/25532489/how-to-store-javascript-html-dom-document-to-locastorage — elfan, Nov 08 '16 at 03:08
yep, that's what I thought. it calls the toString() method every time you trying inserting an object into the local storage — Carafini, Nov 08 '16 at 03:10
I am able to get JSON object using JSON.stringify() and JSON.parse but I am still not able to use tableRow in my table. — parul71625, Nov 08 '16 at 05:19

score 0 · Answer 1 · answered Nov 08 '16 at 08:44

You can't use JSON.stringify on an HTMLElement. Use .outerHTML to get the HTML string. Keep in mind these can get quite long...

Use a DocumentFragment's innerHTML or the DOM's innerHTML directly to parse the string back to an element.

var mockLocalStorage = (function mock() {
  var store = {};
  
  return {
    getItem: function(k) { return store[k]; },
    setItem: function(k, v) { store[k] = v; }
  }
}());

var myRow = document.querySelector("tr");
var myRowStr = myRow.outerHTML;

// This won't work:
// JSON.stringify(myRow)) // returns "{}"

var toLocalStorage = function() {
   mockLocalStorage.setItem("_test", myRowStr); 
}

var fromLocalStorage = function() {
   document.querySelector("tbody").innerHTML +=
     mockLocalStorage.getItem("_test"); 
  
}

toLocalStorage();
fromLocalStorage();

<table>
  <tbody>
    <tr>
      <td>A cell</td>
    </tr>
  </tbody>
</table>

Not able to fetch table rows from an Array stored in local storage

1 Answers1