时间戳

首页 > 解决方案 > 本地存储和 window.location.href.replace

javascript - 本地存储和 window.location.href.replace

问题描述

我和我的课程伙伴正在尝试编写一个代码，当单击订单按钮时​​，它应该保存在本地存储中并重定向到订单页面。

到目前为止，当我们点击订单时，它还没有在谷歌开发者工具的应用程序/本地存储部分注册，因此不会重定向到新页面。

我们放置了一个事件监听器来在我们单击时显示一个 console.log，只是为了确保按钮是按顺序排列的（这部分并不重要）。

我们还使用了在线 javascript 验证器来消除拼写错误。

我们还需要 order.html 文件中的任何特定代码来与本地存储接口吗？

  <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>grc</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="groceries.html">Groceries</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <aside><img class="imgclass1" src="images/rounded logo.png" alt="Grocer Nigeria"></aside>
    <article class="preinventory">
      <section class="columns-desktop">
        <div class="inventory">
          <img class="sales" src="images/tomato.jpg" alt="Tomato"/>
          <div class="columns">
            <div class="title">Tomato</div>
            <div class="Price">$100</div>
          </div>
          <p class="Desc"> Our Tomato2</p>
          <button data-order="Tomato2">Order</button>
        </div>

        <div class="inventory">
          <img class="sales" src="images/tomato.jpg" alt="Tomato"/>
          <div class="columns">
            <div class="title">Tomato</div>
            <div class="Price">$100</div>
          </div>
          <p class="desc"> Our Tomato</p>
          <button data-order="Tomato">Order</button>
        </div>
      </section>
    </article>
  </main>
  <footer>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="groceries.html">Groceries</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </footer>
  <script type="text/javascript">

    window.addEventListener("DOMcontentLoaded", function(e){
    const orderButtons= document.querySelectorAll("button[data-order]");

      orderButtons.forEach(function(button){
        button.addEventListener("click",function(e){
          const button= e.currentTarget;
          const container= button.parentNode;

          const order={
            id:button.getAttribute("data-order"),
            title: container.querySelector(".title").innerText,
            price1: container.querySelector(".Price").innerText,
            desc:container.querySelector(".desc").innerText
          };

          localStorage.setItem('order', JSON.stringify(order));

          const url = window.location.href.replace("grc.html","order.html");
          window.location.href = url;
        });
      });




    });
    window.addEventListener("DOMcontentLoaded", function(e){
      console.log("The page is loaded.");
    });
    const orderButtons= document.querySelectorAll("button[data-order]");
    orderButtons.forEach(function(button){
      button.addEventListener("click", function(e){
        console.log("The button was clicked.");
      });
    });
  </script>

</body>

</html>

  **Below is what I see when I run the live server**

<!-- Code injected by live-server -->
<script type="text/javascript">
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function() {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    head.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    head.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function(msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            console.log('Live reload enabled.');
        })();
    }
    // ]]>
</script>
</body>

</html>

标签： javascriptjsonfunctionlocal-storagelocation-href

解决方案

这里的问题是事件DOMContentLoaded不会触发。这是我使用该load事件的方式；对于重定向，我只是使用URL search params了（因为我不知道您的其他 html 文件是什么样的），尽管您可以使用您的其他 html 文档。

片段如下

但是请注意：Stackoverflow 将不允许 JavaScript 运行，并且会抛出一个securityError. 要运行此代码，您必须将其保存在您的计算机上或使用 jsFiddle

function continue_ordering() {
  alert("Now continue with order");
};

window.addEventListener("load", function(e) {
  const orderButtons = document.querySelectorAll("button[data-order]");
  orderButtons.forEach(function(button) {
    button.addEventListener("click", function(e) {
      const button = e.currentTarget;
      const container = button.parentNode;
      const id = button.getAttribute("data-order");
      const order = {
        id,
        title: container.querySelector(".title").innerText,
        price1: container.querySelector(".price").innertext,
        desc: container.querySelector(".desc").innerText
      };
      localStorage.setItem("order-" + id, JSON.stringify(order));
      window.location.search = "?ordering=true&order-id=" + id;
    });
  });
});
window.addEventListener("load", function(e) {
  if (window.location.search.search("ordering=true") != -1) {
    console.log("User is ordering");
    const params = new URLSearchParams(location.search)
    const id = params.get("order-id");
    if (!id || id == null) throw "There is no order id, error. Remove the ?ordering=true from the url and try again.";

    const order_info = JSON.parse(localStorage.getItem("order-" + id));
    if (!order_info) throw "Order information is not present: try ordering again. Remove the ?ordering=true from the url";
    console.log("Order info is:\n", order_info);
    document.getElementById("ordering").removeAttribute("hidden");
    return;
  };
  document.getElementById("make-order").removeAttribute("hidden");
});
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button) {
  button.addEventListener("click", function(e) {
    console.log("The button was clicked.");
  });
});
<div id="make-order" hidden>
  <button data-order="test">Order</button>
  <div class="title">This is the title</div>
  <div class="price">130 USD</div>
  <div class="desc">Lorem</div>
</div>
<div id="ordering" hidden>
  <h1>
    You are ordering.
    <br> Choose
    <a href="javascript:location.search='';">Stop ordering</a> Or <a href="javascript:continue_ordering();">Continue with order</a>
  </h1>
</div>

推荐阅读