javascript - JSON stringify 在刷新后显示对象对象
问题描述
输入数据没问题,提交也没问题。但是,如果我刷新,输入的所有内容都会显示为对象对象。任何想法是为什么?
除此之外,每个输入创建表数据,但单独而不是在一个表中,每个输入将每个新创建的数据并排放置,而我希望它们像 justify-content: space-around 一样围绕空间。但它似乎没有这样做
对 JS 来说还是新手。我无法确切地找到我做错了什么。JSON stringify 对我来说仍然是一种新的做法。所以,我不确定我所做的是否正确。
编辑 ------------------------ 谁能解释刷新后格式化发生了什么?
html
<h1>Library</h1>
<div id="login" class="login-btn">
<button class="User" id = "login">login</button>
</div>
<button id="clear">Clear</button>
<form id="form" action="">
<input class="input" type="text" id="input-title" placeholder="Title" required />
<input class="input" type="text" id="input-author" placeholder="Author" required/>
<input class="input" type="number" id="input-number" placeholder="Pages" required />
<input value="Submit" id="submitbtn" class="submit" type="submit">
</form>
<input type="checkbox" class="checkbox"><span> Check me if you read the book</span>
<table id="table">
</table>
<script src="script.js"></script>
</body>
</html>
js
//纽扣
const buttonLogin = document.getElementById("login")
const table = document.getElementById("table")
const clearBtn = document.getElementById("clear")
const submitBtn = document.getElementById("submitbtn")
const form = document.getElementById("form")
const inputTitle = document.getElementById("input-title")
const inputAuthor = document.getElementById("input-author")
const inputNumber = document.getElementById("input-number")
//array local storage
let itemsArray = localStorage.getItem('items')
? JSON.parse(localStorage.getItem('items'))
: []
localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))
const createBook = (text, text1, text2) => {
const tble = document.createElement('table')
const td = document.createElement('td')
const td2 = document.createElement('td')
const td3 = document.createElement('td')
td.textContent = text
td.style.color = ('black')
td.style.border = ('solid')
td.style.borderColor =('blueviolet')
td2.textContent = text1
td2.style.color = ('black')
td2.style.border = ('solid')
td2.style.borderColor = ('blueviolet')
td3.textContent = text2
td3.style.color = ('black')
td3.style.border = ('solid')
td3.style.borderColor =('blueviolet')
table.appendChild(td)
table.appendChild(td2)
table.appendChild(td3)
}
form.addEventListener('submit', function (e) {
e.preventDefault()
//for (var i = 0; i < 2; i++) {
itemsArray.push(inputTitle, inputAuthor, inputNumber)
localStorage.setItem('items', JSON.stringify(itemsArray))
createBook(inputTitle.value, inputAuthor.value, inputNumber.value)
inputTitle.value = ''
inputAuthor.value= ''
inputNumber.value= ''
// }
})
data.forEach ((item) => {
createBook(item)
})
//clear list
clearBtn.addEventListener('click', function () {
localStorage.clear()
while (table.firstChild) {
table.removeChild(table.firstChild)
}
})
解决方案
您需要保存输入的值,而不是输入元素本身。并且单个项目的值应该一起收集到一个数组或对象中。
itemsArray.push([inputTitle.value, inputAuthor.value, inputNumber.value])
此外,当您处理数据时,您需要将数组分散到单独的参数中createBook()
。
data.forEach ((item) => {
createBook(...item)
})
推荐阅读
- javascript - javascript 下拉菜单总是在特定位置打开
- javascript - 除非用户触发要显示的地图,否则避免加载 Google Maps API
- crystal-reports - Crystal Reports 报表页脚显示公式的最高值
- reactjs - 方法 handleClick() 中的参数“i”是用来做什么的?
- r - 为代码折叠花括号创建快捷方式
- python - Pandas 合并 2 个数据帧,长度更改错误
- android - Android 上的 Firebase App Distribution 新构建警报
- elasticsearch - Elasticsearch 服务器不接受连接
- reactjs - Typescript React 错误 - 参数“内部”使用上下文隐式具有“任何”类型
- django - django-allauth 没有名为 'django.core.email' 的模块