如何在 JavaScript 中将对象值从本地存储提取到每一行

How to extract object values from localstorage to each row in JavaScript

本文关键字：提取 存储 一行 JavaScript 对象      更新时间：2023-09-26

我想遍历我本地存储的对象（JSON.stringify），然后将它们打印到每一行（html）。每行采用一个对象，并将值打印到该行中的每一列。我不知道这是否有帮助，但它可能会帮助您更好地理解我想要解释的内容。

var table2 = document.getElementById('table');
for(var l = 0; l < localStorage.getItem("Rows"); l += 1) {
	var tableinLoadRow = document.getElementById('table').insertRow(l);
	for(var t = 0; t < 9; t += 1) {
		var tableinLoadCell = tableinLoadRow.insertCell(t);
	}
	for(x in localStorage) {
		var obj = JSON.parse(localStorage.getItem(x));
		for(i in obj) {
			if(i === "ModelMake") {
				table2.rows[l].cells[0].innerHTML = obj[i];
			}
		}
	}
}

我不能把整个代码应用程序的代码放进去，因为它有 200 多行，我认为没有人想经历所有这些。

下面是一个简单的"Vanilla.js"示例（JSBin 链接）来说明该过程。请注意，如果数据的属性顺序不完全相同，或者对象的属性数量不一致，则此示例将无法正确输出。这将需要一些更具体的工程设计。

.HTML 

<div>
  <table id="table" class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

JavaScript

(function() {
  'use strict';
  var data = [
    { name: 'Bob', age: 40, gender: 'M' },
    { name: 'James', age: 26, gender: 'M' },
    { name: 'Susan', age: 37, gender: 'F' }
  ];
  var table, row, cell;
  table = document.getElementById('table');
  for (var i = 0; i < data.length; i++) {
    // insert a new row at the end of the table
    row = table.insertRow(-1);
    for (var prop in data[i]) {
      cell = row.insertCell();
      cell.innerText = data[i][prop];
    }
  }
})();

这里有一种方法可以做到这一点。我正在使用 JQuery 来克隆 DOM 节点（表行），但如果你真的需要在 vanillaJS 中做到这一点，你可以。

请注意，由于 XSS 问题，代码在此代码段中不起作用，但您应该能够将其复制/粘贴到您控制的环境中，并且它应该在那里工作。

var data = [
  {id: 1, name: "bob", color: "blue"},
  {id: 2, name: "carl", color: "red"},
  {id: 3, name: "sally", color: "lavender"}
];
window.localStorage.Rows = JSON.stringify(data);
function addRow(row) {
  var tr = $('#cloneme').clone().prop('hidden',false);
  tr.find('.id').text(row.id);
  tr.find('.name').text(row.name);
  tr.find('.color').text(row.color);
  tr.appendTo('#table');
}
var dataFromLocalStorage = JSON.parse( window.localStorage.Rows );
dataFromLocalStorage.forEach(function(thisrow){
  addRow(thisrow);
});
#table { 
  border-spacing: 4px;
  border-collapse: separate;
}
th {
  background-color: silver;
  padding: .5em;
}
td {
  border: 1px solid silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>id</th>
    <th>name</th>
    <th>favourite color</th>
  </tr>
  <tr id="cloneme" hidden>
    <td class="id">{{id}}</td>
    <td class="name">{{name}}</td>
    <td class="color">{{colour}}</td>
  </tr>
</table>

相关文章：