Как я могу получить имя ключа localStorage на основе того, что я ввожу в форму

Я пытаюсь создать миниатюру блога и контент блога с вводом контента блога.

У меня есть форма ввода блога и миниатюра на той же странице, вот код страницы:

let blogs = []



let month = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sept",
    "Oct",
    "Nov",
    "Dec"
]

function addBlog(event) {
    event.preventDefault()

    let inputName = document.getElementById("inputProjectName").value
    let inputContent = document.getElementById("inputDescription").value
    let inputImage = document.getElementById("inputImage").files[0]

    const projectDate = {

        startDate: document.getElementById("inputStartDate").value,
        endDate: document.getElementById("inputEndDate").value
    }

    inputImage = URL.createObjectURL(inputImage)

    let cardIcons = {
        html: document.querySelector('input[name = "checkHtml"]').checked,
        css: document.querySelector('input[name = "checkCss"]').checked,
        nodeJs: document.querySelector('input[name = "checkNode"]').checked,
        reactJs: document.querySelector('input[name = "checkReact"]').checked
    }

    let blog = {
        title: inputName,
        date: projectDate,
        content: inputContent,
        icons: cardIcons,
        image: inputImage
    }

    blogs.push(blog)

    console.table(blogs)

    renderCard()
}

function renderCard() {

    let containerBlog = document.getElementById("contents")
    containerBlog.innerHTML = '';

    const objectBlogString = JSON.stringify(blogs);

    for (let i = 0; i < blogs.length; i++) {

        localStorage.setItem(`${blogs[i].title}`, objectBlogString);

        containerBlog.innerHTML += `
        <div id = "contents" class = "mp-card">
            <!--MPC = My Project Card-->
            <div class = "mpc-img">
                <img src = "${blogs[i].image}" alt = "">
            </div>
            <div class = "mpc-title">
            <a href = "blog-detail.html" onclick = "renderBlog(event)" id='${blogs[i].title} action = "blog-detail.html"'>
                <p>${blogs[i].title}</p>
            </a>
            </div>
            <div class = "mpc-duration">
                <small>Durasi: 1 Bulan</small>
            </div>
            <div class = "mpc-content">
                ${blogs[i].content}
            </div>
            <div class = "mpc-icons">
                ${(blogs[i].icons.html === true) ? '<i class = "fa-brands fa-html5"></i>' : ''}
                ${(blogs[i].icons.css === true) ? '<i class = "fa-brands fa-css3-alt"></i>' : ''}
                ${(blogs[i].icons.nodeJs === true) ? '<i class = "fa-brands fa-node-js"></i>' : ''}
                ${(blogs[i].icons.reactJs === true) ? '<i class = "fa-brands fa-react"></i>' : ''}  
            </div>
            <div class = "mpc-mod">
                <button>Edit</button>
                <button>Delete</button>
            </div>
        </div>
        `
    }
}

function renderBlog(event) {

    let keyName;

    if (event) {

        keyName = event.path[1].id;

        const myProjectBody = document.getElementById('myProjectBody');

        const data = JSON.parse(localStorage.getItem(keyName))

        myProjectBody.innerHTML = '';

        for (let i = 0; i < data.length; i++) {


            myProjectBody.innerHTML += `
            <div id = "blog-detail">
        <!--BD = Blog Detail-->
        <div class = "bd-title">
            <p>${data[i].title}</p>
        </div>
        <!--IDC = Image, Duration, Categories-->
        <div class = "bd-idc">
            <div class = "idc-left">
                <img src = "${data[i].image}" alt = "Blog Image">
            </div>
            <div class = "idc-right">
                <p>Duration</p>
                <div class = "bd-duration">
                    <div style = "padding-left: 2px;">
                        <i class = "fa-solid fa-calendar-days"></i>
                        <p>1 Jan 2022 - 1 Aug 2022</p>
                    </div>
                    <div>
                        <i class = "fa-solid fa-clock"></i>
                        <p>8 Month</p>
                    </div>
                </div>
                <div class = "bd-tech">
                    <p>Technologies</p>
                    <div class = "tech-body">
                    ${(data[i].icons.html === true) ? '<div class = "tech-html"><i class = "fa-brands fa-html5"></i><p>HTML</p></div>' : ''}
                    ${(data[i].icons.css === true) ? '<div class = "tech-css"><i class = "fa-brands fa-css3-alt"></i><p>CSS</p></div>' : ''}
                    ${(data[i].icons.nodeJs === true) ? '<div class = "tech-node"><i class = "fa-brands fa-node-js"></i><p>nodeJs</p></div>' : ''}
                    ${(data[i].icons.reactJs === true) ? '<div class = "tech-react"><i class = "fa-brands fa-react"></i><p>reactJs</p></div>' : ''}
                    </div>
                </div>
            </div>
        </div>

        <div class = "bd-content">
            <p>
                ${data[i].content}
            </p>
        </div>
    </div>
            `
        }
    }
}
<!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>My Project</title>
    <link rel = "stylesheet" href = "css/style.css">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<body>
    <!-- NAVBAR -->
    <nav>
        <div class = "nav-left">
            <a href = "/"><img src = "assets/logo.png" alt = ""></a>

            <ol>
                <li>
                    <a href = "/">Home</a>
                </li>
                <li>
                    <a href = "myproject.html">My Project</a>
                </li>
            </ol>
        </div>
        <div class = "nav-right">
            <a href = "contact.html">Contact me</a>
        </div>
    </nav>
    <!--xNAVBARx-->

    <div id = "myProjectBody">
        <!--MPI = My Project Input-->
        <div class = "mpi-title">
            <p>ADD BLOG</p>
        </div>
        <!--Form-->
        <div class = "mpi-form-container">
            <div class = "mpi-form">
                <!--MP = My Project Input-->
                <form onsubmit = "addBlog(event)" action = "blog-detail.html">
                    <div class = "mpi-name">
                        <label for = "inputProjectName">Project Name</label>
                        <input type = "text" id = "inputProjectName">
                    </div>
                    <div class = "mpi-date">
                        <div class = "date-start">
                            <label for = "inputStartDate">Start Date</label>
                            <input type = "date" id = "inputStartDate">
                        </div>
                        <div class = "date-end">
                            <label for = "inputEndDate">End Date</label>
                            <input type = "date" id = "inputEndDate">
                        </div>
                    </div>
                    <div class = "mpi-desc">
                        <label for = "inputDescription">Description</label>
                        <textarea name = "inputDescription" id = "inputDescription"></textarea>
                    </div>
                    <div class = "mpi-check-cont">
                        <label for = "checkTitle">Technologies</label>
                        <div class = "mpi-check">
                            <div class = "check-left">
                                <div>
                                    <label for = "checkHtml" class = "check-label">HTML
                                    <input type = "checkbox" id = "checkHtml" name = "checkHtml"check>
                                    <span class = "checkmark"></span>
                                </label>
                                </div>
                                <div>
                                    <label for = "checkNode" class = "check-label">Node Js
                                    <input type = "checkbox" id = "checkNode" name = "checkNode">
                                    <span class = "checkmark"></span>
                                </label>
                                </div>
                            </div>
                            <div class = "check-right">
                                <div>
                                    <label for = "checkCss" class = "check-label">CSS
                                    <input type = "checkbox" id = "checkCss" name = "checkCss">
                                    <span class = "checkmark"></span>
                                </label>
                                </div>
                                <div>
                                    <label for = "checkReact" class = "check-label">React Js
                                    <input type = "checkbox" id = "checkReact" name = "checkReact">
                                    <span class = "checkmark"></span>
                                </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label>Upload Image</label>
                        <div class = "mpi-image">
                            <label for = "inputImage">
                    <div class = "mpi-choose">Choose</div>
                    <div class = "mpi-attach"><i class = "fa-solid fa-paperclip"></i></div>
                    </label>
                            <input type = "file" id = "inputImage" hidden />
                        </div>
                    </div>
                    <div class = "mpi-submit">
                        <button type = "submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
        <!--xFormx-->

        <!--My Project-->

        <div class = "mp-container">
            <div class = "mp-title">
                <p>MY PROJECT</p>
            </div>
            <div id = "contents" class = "mp-card-container">
                <div class = "mp-card">
                    <!--MPC = My Project Card-->
                    <div class = "mpc-img">
                        <img src = "assets/DWB.png" alt = "">
                    </div>
                    <div class = "mpc-title">
                        <a href = "blog-detail.html">
                            <p>Dumbways Bootcamp 2022</p>
                        </a>
                    </div>
                    <div class = "mpc-duration">
                        <small>Durasi: 3 Bulan</small>
                    </div>
                    <div class = "mpc-content">
                        content
                    </div>
                    <div class = "mpc-icons">
                        <i class = "fa-brands fa-html5"></i>
                        <i class = "fa-brands fa-css3-alt"></i>
                        <i class = "fa-brands fa-node-js"></i>
                        <i class = "fa-brands fa-react"></i>
                    </div>
                    <div class = "mpc-mod">
                        <button>Edit</button>
                        <button>Delete</button>
                    </div>
                </div>
            </div>

        </div>

        <!--xMy Projectx-->
    </div>
    <script src = "js/blog.js"></script>
</body>

</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>Blog detail</title>
    <link rel = "stylesheet" href = "css/style.css">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

<body>
    <!-- NAVBAR -->
    <nav>
        <div class = "nav-left">
            <a href = "/"><img src = "assets/logo.png" alt = ""></a>

            <ol>
                <li>
                    <a href = "/">Home</a>
                </li>
                <li>
                    <a href = "myproject.html">My Project</a>
                </li>
            </ol>
        </div>
        <div class = "nav-right">
            <a href = "">Contact me</a>
        </div>
    </nav>
    <!--xNAVBARx-->

    <!--Blog Detail-->
    <div id = "blog-detail">
        <!--BD = Blog Detail-->
        <div class = "bd-title">
            <p>Blog Title</p>
        </div>
        <!--IDC = Image, Duration, Categories-->
        <div class = "bd-idc">
            <div class = "idc-left">
                <img src = "assets/DWB.png" alt = "Blog Image">
            </div>
            <div class = "idc-right">
                <p>Duration</p>
                <div class = "bd-duration">
                    <div style = "padding-left: 2px;">
                        <i class = "fa-solid fa-calendar-days"></i>
                        <p>10 May 2022 - 10 Jul 2022</p>
                    </div>
                    <div>
                        <i class = "fa-solid fa-clock"></i>
                        <p>3 Month</p>
                    </div>
                </div>
                <div class = "bd-tech">
                    <p>Technologies</p>
                    <div class = "tech-body">
                        <div class = "tech-html">
                            <i class = "fa-brands fa-html5"></i>
                            <p>HTML</p>
                        </div>
                        <div class = "tech-css">
                            <i class = "fa-brands fa-css3-alt"></i>
                            <p>CSS</p>
                        </div>
                        <div class = "tech-node">
                            <i class = "fa-brands fa-node-js"></i>
                            <p>nodeJs</p>
                        </div>
                        <div class = "tech-react">
                            <i class = "fa-brands fa-react"></i>
                            <p>reactJs</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class = "bd-content">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet
                consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
                libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente,
                minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque
                a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse.
            </p>
        </div>
    </div>

    <!--xBlog Detailx-->
    <script src = "js/blog-detail.js"></script>
</body>

</html>

Я сохраняю все значение из ввода в localStorage с именем ключа ${blogs[i].title} в якоре заголовка карты, полученном из формы ввода заголовка, как я могу получить доступ к имени ключа с помощью localStorage.getItem для конкретного заголовка, который я ввожу?

Заранее спасибо.

Вы используете узел js?

Kaleem Shoukat 17.05.2022 08:57

Еще нет, я пока изучаю javascript

Rizkael 17.05.2022 18:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас есть ссылка для навигации по каждому элементу блога:

<a href = "blog-detail.html" onclick = "renderBlog(event)" id='${blogs[i].title} action = "blog-detail.html"'>
    <p>${blogs[i].title}</p>
</a>

onclick запустите функцию renderBlog, а также перейдите к blog-detail.html. Вы можете запустить функцию и избежать выполнения навигации event.preventDefault(). Это имеет смысл, если вы показываете список блогов и выбранный блог на одной странице, что не так.

Итак, вам нужно сделать навигацию. Возможность указать на странице элемент для отображения — добавить параметр в URL-адрес. Что-то вроде:

<a href = "blog-detail.html?${blogs[i].title}" action = "blog-detail.html"'>
    <p>${blogs[i].title}</p>
</a>

И когда вы загружаете свой blog-detail.html, используйте window.location.search (удалив ? в позиции 0), чтобы получить заголовок, и с заголовком вы можете получить доступ к своим данным из хранилища и использовать их.

Где я могу использовать window.location.search? Я использую его в const data = JSON.parse(localStorage.getItem(window.location.search.subst‌​ring(1))), но значение равно null

Rizkael 17.05.2022 19:10

Хорошо, теперь я понимаю, что это значение равно null, потому что я использую пробел для примера имени блога: Blog title ключевым именем будет название блога, но когда я использую window.location.search.substring(1), оно будет отображаться Blog%20Title. Теперь, когда я могу получить значение, но все еще не могу его показать, оно говорит Uncaught ReferenceError: i is not defined, когда я использую data[i].title

Rizkael 17.05.2022 19:14

Используйте decodeURIComponent() с поиском местоположения.

Victor 17.05.2022 19:21

Другие вопросы по теме