嘗試將數據從本地存儲顯示到 2 個 html 元素

Question

我正在嘗試將本地存儲中的數據顯示到單擊按鈕功能后創建的 2 個 HTML 元素。

我可以在“應用程序”選項卡“本地存儲”中看到數據正在保存，如圖所示。

圖片在這里

即使在刷新頁面后，我也想保留 HTML 標題和 url。

這是 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>Work tracker</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="div-main">
        <div class="div-box">
            <h1 class="title-header">Work Tracker V1.00</h1>
            <p>The app was built in order to save the progress of you'r work</p>
            <label for="">Name</label>
            <input type="text" class="input-title">
            <label for="">Enter URL</label>
            <input type="text" class="input-url"> </br>
            <button class="btn-submit" onclick="createWork()">Submit work</button>
        </div>
    </div>

    <div class="div-tree">

        <h1>Tree Of Work</h1>

        <div class="div-work">
            
        </div>

    </div>
    <script src="script.js"></script>
</body>

</html>

這里的 JavaScript 代碼



function createWork() {
    let inputTitle = document.querySelector(".input-title").value;
    let inputUrl = document.querySelector(".input-url").value;
    let div = document.createElement('div');
    let newTitle = document.createElement("h2");
    let newUrl = document.createElement("h3");

    div.className = "div-work";
    document.body.appendChild(div);

    div.appendChild(newTitle);
    div.appendChild(newUrl);

    newTitle.innerText = "Title: " + inputTitle;
    newUrl.innerText = "URL: " + inputUrl;



    // save data to local storage
    localStorage.setItem('title', newTitle.innerText);
    localStorage.setItem('url', newUrl.innerText);


    if (localStorage["title"] && localStorage["url"]) {
        let storedTitle = localStorage.getItem('title');
        let storedUrl = localStorage.getItem('url');
        console.log(storedTitle);
        console.log(storedUrl);

    }
};

Answer 1

你幾乎在那里

https://jsfiddle.net/mplungjan/e74fcon8/

注意我將內聯點擊更改為 eventListener

window.addEventListener("DOMContentLoaded", () => {
  const titleField = document.querySelector(".input-title");
  const urlField = document.querySelector(".input-url")


  const createWork = () => {
    let inputTitle = titleField.value;
    let inputUrl = urlField.value;
    let div = document.createElement('div');
    let newTitle = document.createElement("h2");
    let newUrl = document.createElement("h3");

    div.className = "div-work";
    document.body.appendChild(div);

    div.appendChild(newTitle);
    div.appendChild(newUrl);

    // save data to local storage
    localStorage.setItem('title', inputTitle);
    localStorage.setItem('url', inputUrl);

    newTitle.innerText = "Title: " + inputTitle;
    newUrl.innerText = "URL: " + inputUrl;
  }
  document.querySelector(".btn-submit").addEventListener("click",createWork)
  if (localStorage.title && localStorage.url) {
    let storedTitle = localStorage.getItem('title');
    let storedUrl = localStorage.getItem('url');
    titleField.value = storedTitle;
    urlField.value = storedUrl;
    createWork();
  }
});

Answer 2

您應該從createWork函數中運行localStorage.getItem代碼片段。

if (localStorage["title"] && localStorage["url"]) {
        let storedTitle = localStorage.getItem('title');
        let storedUrl = localStorage.getItem('url');
        console.log(storedTitle);
        console.log(storedUrl);
  let div = document.createElement('div');
        let newTitle = document.createElement("h2");
    let newUrl = document.createElement("h3");

    div.className = "div-work";
    document.body.appendChild(div);

    div.appendChild(newTitle);
    div.appendChild(newUrl);

    newTitle.innerText = "Title: " + storedTitle;
    newUrl.innerText = "URL: " + storedUrl;

    }

function createWork() {
    let inputTitle = document.querySelector(".input-title").value;
    let inputUrl = document.querySelector(".input-url").value;
    let div = document.createElement('div');
    let newTitle = document.createElement("h2");
    let newUrl = document.createElement("h3");

    div.className = "div-work";
    document.body.appendChild(div);

    div.appendChild(newTitle);
    div.appendChild(newUrl);

    newTitle.innerText = "Title: " + inputTitle;
    newUrl.innerText = "URL: " + inputUrl;



    // save data to local storage
    localStorage.setItem('title', newTitle.innerText);
    localStorage.setItem('url', newUrl.innerText);


    
};

嘗試將數據從本地存儲顯示到 2 個 html 元素

問題描述

2 個解決方案

解決方案1
0 2022-12-24 21:00:08

解決方案2
0 2022-12-24 21:16:45

嘗試將數據從本地存儲顯示到 2 個 html 元素

問題描述

2 個解決方案

解決方案1 0 2022-12-24 21:00:08

解決方案2 0 2022-12-24 21:16:45

解決方案1
0 2022-12-24 21:00:08

解決方案2
0 2022-12-24 21:16:45