来自 localStorage 的数组并显示在 table

Question

我得到的数据不在正确的列中。正确的做法是什么？

//store the data into localStorage


/* dynamically draw the table, this is the part that I m not getting it right. What should I do to ge the value in the right column. */

function doShowAll() {
  if (CheckBrowser()) {
    var key = "";
    var list = "<tr><th>Name</th><th>Value</th><th>Item</th></tr>\n";
    var i = 0;

    for (i = 0; i <= localStorage.length - 1; i++) {
      key = localStorage.key(i);

      list += "<tr><td>" + key + "</td>\n<td>" +
        JSON.parse(localStorage.getItem(key)) + "</td></tr>\n";
    }
    if (list == "<tr><th>Name</th><th>Value</th><th>Item</th></tr>\n") {
      list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
    }
    document.getElementById('list').innerHTML = list;
  } else {
    alert('Cannot store shopping list as your browser do not support local storage');
  }
}


/*
 * Checking the browser compatibility.
 */


function CheckBrowser() {
  if ('localStorage' in window && window['localStorage'] !== null) {
    // we can use localStorage object to store data
    return true;
  } else {
    return false;
  }
}

/* 动态绘制 table，这是我没弄对的部分。我应该怎么做才能在右栏中获取值。 */

Answer 1

解析 JSON 后，您需要提取 data 和 item，以便在单独的 table 列中显示它们。

function doShowAll() {
  if (CheckBrowser()) {
    var key = "";
    var list = "<tr><th>Name</th><th>Value</th><th>Item</th></tr>\n";
    var i = 0;

    if (localStorage.length == 0) {
      list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td><td><i>empty</i></td></tr>\n";
    } else {
      for (i = 0; i < localStorage.length; i++) {
        key = localStorage.key(i);
        let data = JSON.parse(localStorage.getItem(key));
        list += "<tr><td>" + key + "</td>\n<td>" +
          data[0] + "</td>" + data[1] + "</tr>\n";
      }
    }
    document.getElementById('list').innerHTML = list;
  } else {
    alert('Cannot store shopping list as your browser do not support local storage');
  }
}

来自 localStorage 的数组并显示在 table

array from localStorage and display in a table

javascript

arrays

json

local-storage