Как я могу получить имя ключа 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
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
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

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