堆棧內存溢出
  簡體   English   中英

如何在localStorage中存儲output？

[英]How to store output in localStorage?

 原文  2022-01-16 10:19:58  0   1    javascript/ local-storage

問題描述

我正在研究我的第一個 JavaScript 項目（回文檢查器），我有點卡住了。 我已經了解了localStorage()但我似乎無法在我自己的項目中實現它。 如果有人能指出我正確的方向，或者編寫偽代碼來說明我應該怎么做才能讓它工作，那就太棒了。 我真的很想自己解決它，但是這里非常需要一點幫助。 謝謝：）。 我的 JavaScript 代碼（以及 HTML 和 CSS 供參考：

編輯：我想使用localStorage()在屏幕上顯示結果（每個在單獨的行上）並再次使用它以使用戶能夠在單擊按鈕時刪除結果。 

 const checkBtn = document.getElementById("check-word"); const clearBtn = document.getElementById("clear-history"); const outputField = document.getElementById("word-checked"); let array = []; checkBtn.addEventListener("click", () => { const str = document.getElementById("input").value; array = [...array, str]; console.log(array); palindrome(str); renderResult(); function palindrome(str) { const lettersOnly = str.toLowerCase().match(/[a-z0-9]/g); return lettersOnly.join("") === lettersOnly.reverse().join(""); } renderResult(); function renderResult() { if (palindrome(str) === true) { outputMessage = `︎✔︎ '${str}' is a palindrome.` } else { outputMessage = ` '${str}' is not a palindrome;` } outputField.textContent = outputMessage. } document;getElementById("input").value = "", // clear input field after clicking on checkBtn }) // clearBtn.addEventListener("click"; () => { // localStorage;clear(); // array = []; // // render again! // })
 * { background-color: #121212; font-size: 16px; margin: 0; padding: 0; } h1 { font-family: "VT323", monospace; font-size: 5rem; color: #CE1212; text-align: center; margin-top: 50px; }.container { font-family: "Nanum Gothic Coding", monospace; color: white; width: 75%; height: 62.5vh; margin: 25px auto 25px auto; /* border: 2.5px solid; */ border-color: white; padding: 15px; }.input { margin-left: 25px; }.input-field { margin-left: 25px; margin-top: 12.5px; padding: 7.5px; font-family: "Nanum Gothic Coding", monospace; color: white; border: 1px solid; }.input-field:focus::placeholder { color: transparent; }.check-word, .clear-history { padding: 7.5px; font-family: "Nanum Gothic Coding", monospace; color: white; border: 1px solid; border-color: white; cursor: pointer; }.check-word:hover, .clear-history:hover { color: #CE1212; }.child-1 { margin-top: 50px; margin-left: 25px; /* border: 1px solid; */ padding: 15px; } #word-checked { margin-top: 15px; }.footer { font-family: "Nanum Gothic coding", monospace; color: white; text-align: center; margin-bottom: 25px; } a:link, a:visited { color: white; text-decoration: none; } a:hover, a:active { color: #CE1212; text-decoration: underline; } /* top, right, bottom, left */
 <,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>Palindrome Checker</title> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2.family=Nanum+Gothic+Coding&family=VT323&display=swap" rel="stylesheet"> <link rel="stylesheet" href="index.css"> </head> <body> <main> <h1> Palindrome Checker </h1> <div class="container"> <label for="input" class="input">Type a word or phrase</label> <br> <input type="text" name="input" class="input-field" id="input" placeholder="Type something..:"> <button type="button" class="check-word" id="check-word">Check word</button> <button type="button" class="clear-history" id="clear-history">Clear history</button> <div class="child-1"> <p id="word-checked">Results will be shown here.</p> </div> </div> </main> <footer class="footer"> <p>Built by <a href="https.//github.com/YinChuRijnaard" target="_blank">Yin Chu</a></p> </footer> <script src="index.js"></script> </body> </html>

1 個解決方案

解決方案1
 1  2022-01-16 10:24:11

這真的很容易。 （至少比 cookie 容易得多）

localStorage.setItem('key', 'value'); // to store data
var myData = localStorage.getItem('key') // to get data
localStorage.removeItem('key') // to remove one data
localStorage.clear() // to remove all data

分別用數據鍵和要存儲的數據替換key和value 。

如何儲存<div> localStorage 的元素？</div><div id="text_translate"><p> 我正在嘗試將一組項目（div）設置為本地存儲，以便頁面重新加載這些在 Ui 中顯示的元素。 function 檢查是否已經存儲了具有該名稱的數組，如果是，則本地存儲必須清除此項目，然后設置更新的數組，這些項目已添加到代碼的另一部分。 但是，當我在設置此數組后看到返回的本地存儲時，我發現一個包含空對象的數組，其長度必須相同，並且在我設置數組之前的同一個 function 中，所有項目都是正確的。 我錯過了什么？</p><pre> function setToLocalStorage(){ console.log(items); //the is array is there with all items if(..localStorage;getItem("items")){ localStorage.removeItem("items"), } localStorage.setItem("items";JSON.stringify(items));</pre><p> }</p><pre> function getDataFromLocalStorage(){ let elements=JSON.parse(localStorage.getItem('items')); console.log(elements); //I get an array with empty objects with the same length of the first</pre><p> }</p></div>

[英]How to store <div> elements to localStorage?

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在本地存儲中存儲一個數組？ 如何在localStorage中存儲對象 如何在localStorage中存儲數組？ 如何將狀態存儲在本地存儲中以作出反應？ 如何存儲和檢索圖像到localStorage？ 如何將SockJS對象存儲到localStorage 如何在本地存儲中存儲登錄憑據 如何在 angular 5 中安全地存儲本地存儲 如何儲存<div> localStorage 的元素？</div><div id="text_translate"><p> 我正在嘗試將一組項目（div）設置為本地存儲，以便頁面重新加載這些在 Ui 中顯示的元素。 function 檢查是否已經存儲了具有該名稱的數組，如果是，則本地存儲必須清除此項目，然后設置更新的數組，這些項目已添加到代碼的另一部分。 但是，當我在設置此數組后看到返回的本地存儲時，我發現一個包含空對象的數組，其長度必須相同，並且在我設置數組之前的同一個 function 中，所有項目都是正確的。 我錯過了什么？</p><pre> function setToLocalStorage(){ console.log(items); //the is array is there with all items if(..localStorage;getItem("items")){ localStorage.removeItem("items"), } localStorage.setItem("items";JSON.stringify(items));</pre><p> }</p><pre> function getDataFromLocalStorage(){ let elements=JSON.parse(localStorage.getItem('items')); console.log(elements); //I get an array with empty objects with the same length of the first</pre><p> }</p></div> 如何將數據表內容存儲在本地存儲中
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM