时间戳

首页 > 解决方案 > 寻找一种简单的方法来从一个 HTML 页面中获取一个值并让它出现在另一个页面中。下面的例子：

javascript - 寻找一种简单的方法来从一个 HTML 页面中获取一个值并让它出现在另一个页面中。下面的例子：

问题描述

我想inputs用 id从 3 中获取值#rooms_amount_bedroom #rooms_amount_bathrooms和#rooms_amount_kitchens

HTML 代码：

    <div class="room_type_wrap">

        <small class="counter_title counter_opacity1">Bedrooms</small>
        <hr class="counter_title_underline">
        <div class="counter_wrap">
            <div class="subtractRoom" onclick="minusOneBedrooms()">
                <img src="./assets/images/arrow_down.png" alt="" class="counter_down_arrow">
            </div>
            <input type="number" class="room_count" id="rooms_amount_bedroom" autocomplete="off" value="0">
            <div class="addRoom" onclick="plusOneBedrooms()">
                <img src="./assets/images/arrow_up_white.png" alt="" class="counter_up_arrow">
            </div>
        </div>

        <small class="counter_title counter_opacity2">Bathrooms</small>
        <hr class="counter_title_underline">
        <div class="counter_wrap">
            <div class="subtractRoom" onclick="minusOneBathrooms()">
                <img src="./assets/images/arrow_down.png" alt="" class="counter_down_arrow">
            </div>
            <input type="number" class="room_count" id="rooms_amount_bathrooms" autocomplete="off" value="0">
            <div class="addRoom" onclick="plusOneBathrooms()">
                <img src="./assets/images/arrow_up_white.png" alt="" class="counter_up_arrow">
            </div>
        </div>

        <small class="counter_title counter_opacity3">Kitchens</small>
        <hr class="counter_title_underline">
        <div class="counter_wrap">
            <div class="subtractRoom" onclick="minusOneKitchens()">
                <img src="./assets/images/arrow_down.png" alt="" class="counter_down_arrow">
            </div>
            <input type="number" class="room_count" id="rooms_amount_kitchens" autocomplete="off" value="0">
            <div class="addRoom" onclick="plusOneKitchens()">
                <img src="./assets/images/arrow_up_white.png" alt="" class="counter_up_arrow">
            </div>
        </div>

    </div>

        <div class="next_button__rooms" id="input_info" onClick="location.href='contact_form.html'">
            <img src="./assets/images/next_arrow.png" alt="" class="next_arrow_icon__rooms">
        </div>

并让它们都显示在<p>带有 id 的#chosen_service__room_types

            <div class="your_service_rooms_wrap">
                <h2 class="your_service_rooms">Rooms total</h2>
                <div class="room_type_wrap__maps">
                    <p id="chosen_service__room_types"></p>
                </div>
            </div>

我编写的当前 Javascript 仅抓取并显示其中 1 个值的输入#rooms_amount_bedroom

我要获取数据的页面上的 JS：

        document.getElementById('input_info').addEventListener('click', function () {
            let val1 = document.getElementById('rooms_amount_bedroom').value;
            let val2 = document.getElementById('rooms_amount_bathrooms').value;
            let val3 = document.getElementById('rooms_amount_kitchens').value;
            localStorage.setItem('input', val1, val2, val3)
        })

我要显示数据的页面上的 JS：

document.getElementById('chosen_service__room_types').innerHTML = localStorage.getItem('input', val1, val2, val3);

我是 Javascript 的新手，所以任何帮助将不胜感激。谢谢！

标签： javascripthtml

解决方案

您可以在 localStorage 中为每个键存储一个对象。

localStorage.getItem('input', val1, val2, val3);     // this will not work

您应该做的是单独存储这些值：

localStorage.setItem("input1", val1);
localStorage.setItem("input2", val2);
localStorage.setItem("input3", val3);

或者您可以将所有三个值组合成一个 json 对象：

let obj = {val1, val2, val3};
localStorage.setItem("input", JSON.stringify(obj));

然后，当您想取回数据时：

let retreived = JSON.parse(localStorage.getItem("input"));

推荐阅读