輸入框中的值未保存在本地存儲中
[英]values from input box is not saving on localstorage
問題描述
我開發了一個待辦事項應用程序。 用戶在其中插入一些值並將其保存在屏幕上。 現在我想將這些值保存到本地存儲中。但它沒有被保存，而是我得到一個空的 {}。
這是 javascript 代碼
//crete element from input box and delete
let knoo = document.getElementById('kno')
let box= document.getElementById('txt')
let sub= document.getElementById('sub').addEventListener('click',()=>{
let para = document.createElement('ul')
para.innerText= box.value
knoo.appendChild(para)
box.value=''
localStorage.setItem('key', JSON.stringify(para))
//styling
para.addEventListener('click', ()=>{
para.style.textDecoration = 'line-through'
})
//delete
para.addEventListener('dblclick', ()=>{
knoo.removeChild(para)
})
})
這是 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>hi</h2>
<div id="hello">
<h1>hello</h1>
</div>
<button id="btn">delete</button> <br>
<br>
<input type="text" id="txt">
<button type="submit" id="sub">+</button>
<div id="kno"></div>
<script src="main.js"></script>
</body>
</html>
1 個解決方案
解決方案1
1 2022-03-09 13:29:55
那是因為您將JSON.stringify與 html 元素一起使用，該元素將不起作用，並且它將始終生成{} 。
JSON.stringify() 方法將 JavaScript object 或值轉換為 JSON 字符串
我的解決方案是使用array來存儲para的值並使用JSON.stringify作為array
let knoo = document.getElementById('kno') let box= document.getElementById('txt') let storedvalue = [] if(localStorage.getItem('key')){ storedvalue = localStorage.getItem('key'); } let sub= document.getElementById('sub').addEventListener('click',()=>{ let para = document.createElement('ul') para.innerText= box.value knoo.appendChild(para) box.value='' storedvalue.push(para.innerText) localStorage.setItem('key', JSON.stringify(storedvalue)) //styling para.addEventListener('click', ()=>{ para.style.textDecoration = 'line-through' }) //delete para.addEventListener('dblclick', ()=>{ knoo.removeChild(para) }) })
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <h2>hi</h2> <div id="hello"> <h1>hello</h1> </div> <button id="btn">delete</button> <br> <br> <input type="text" id="txt"> <button type="submit" id="sub">+</button> <div id="kno"></div> <script src="main.js"></script> </body> </html>
如果需要輸入但未填寫，防止本地存儲保存？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.