Storing data locally and replacing the current URL with window.location.href

Question

Storing data locally and replacing the current URL with window.location.href

My course mate and I are working on writing a code that saves an order to local storage and redirects to an order page when the order button is clicked.

However, we are facing issues where clicking on the order button doesn't register in the application/local storage section of the Google Developer Tool and therefore does not redirect to a new page.

We added an event listener to display a console.log message when the button is clicked, just for troubleshooting purposes (this part is not critical).

We also used an online JavaScript validator to remove any typos or errors from our code.

Do we require any specific code on the order.html file to interact with local storage?

javascript json function local-storage location-href

Answer 1

Answer №1

The problem at hand is that the DOMContentLoaded event is not triggering. To address this issue, I have opted to use the load event instead. For redirection purposes, I implemented the use of URL search params (due to lack of information about your other html file), but you can adjust it according to your specific needs.

Below is the code snippet

Please note: JavaScript will not execute on Stackoverflow and will display a `securityError`. To test this code, save it locally or use a platform like 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 btn = e.currentTarget;
      const container = btn.parentNode;
      const id = btn.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>

Answer 2

The problem at hand is that the DOMContentLoaded event is not triggering. To address this issue, I have opted to use the load event instead. For redirection purposes, I implemented the use of URL search params (due to lack of information about your other html file), but you can adjust it according to your specific needs.

Below is the code snippet

Please note: JavaScript will not execute on Stackoverflow and will display a `securityError`. To test this code, save it locally or use a platform like 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 btn = e.currentTarget;
      const container = btn.parentNode;
      const id = btn.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>

Answer 3

Answer №2

Once the code tries to hook into it, the DOMContentLoaded event has already been triggered.

For more information on this topic, take a look at:

Code inside DOMContentLoaded event not working

Answer 4

Once the code tries to hook into it, the DOMContentLoaded event has already been triggered.

For more information on this topic, take a look at:

Code inside DOMContentLoaded event not working

Storing data locally and replacing the current URL with window.location.href

Answer №1

Please note: JavaScript will not execute on Stackoverflow and will display a `securityError`. To test this code, save it locally or use a platform like jsFiddle

Answer №2

Similar questions

Optimizing jQuery scripts by consolidating them to reduce file size

Looking to display a page header alongside an image on the same page

Tips for populating several input fields using an ajax callback

How to create a basic calculator in AngularJS with two textboxes specifically designed for calculating squares?

Having difficulty with building a basic module in Node JS, it's just not cooperating

Utilizing Packery.js in AngularJS

Issue: [Issue: ENOENT: the file or directory './1695556319341.mp3' does not exist]

What is the process for customizing the color and thickness of the active tab inkBarStyle in React Material-UI?

Mastering the Art of Sending Multiple Values via Ajax

Creating Browser Extensions with Vue.js and Vue CLI

There is an issue with the format of the fromdate parameter in the JSON query. It should match the following format: "%Y-%m-%dT%H:%

I encountered a PrimeVue error while running a Vue Jest test

Harvesting information from a Nested Array using Hive

Is there a way to identify modifications in the DOM using jQuery UI Sortable?

Is it better to convert fields extracted from a JSON string to Date objects or moment.js instances when using Angular and moment.js together?

Dividing JSON information into parts

Tips on organizing and designing buttons within a canvas

Transform JSON data into a CSV file using JavaScript or C# in an MVC4 framework, then import the data into

Encountering an error stating "cloudinary.uploader is undefined" while attempting to delete media files from Cloudinary

how can a select dropdown be dynamically displayed based on the previous selection?

Storing data locally and replacing the current URL with window.location.href

Answer №1

Please note: JavaScript will not execute on Stackoverflow and will display a securityError. To test this code, save it locally or use a platform like jsFiddle

Answer №2

Similar questions

Optimizing jQuery scripts by consolidating them to reduce file size

Looking to display a page header alongside an image on the same page

Tips for populating several input fields using an ajax callback

How to create a basic calculator in AngularJS with two textboxes specifically designed for calculating squares?

Having difficulty with building a basic module in Node JS, it's just not cooperating

Utilizing Packery.js in AngularJS

Issue: [Issue: ENOENT: the file or directory './1695556319341.mp3' does not exist]

What is the process for customizing the color and thickness of the active tab inkBarStyle in React Material-UI?

Mastering the Art of Sending Multiple Values via Ajax

Creating Browser Extensions with Vue.js and Vue CLI

There is an issue with the format of the fromdate parameter in the JSON query. It should match the following format: "%Y-%m-%dT%H:%

I encountered a PrimeVue error while running a Vue Jest test

Harvesting information from a Nested Array using Hive

Is there a way to identify modifications in the DOM using jQuery UI Sortable?

Is it better to convert fields extracted from a JSON string to Date objects or moment.js instances when using Angular and moment.js together?

Dividing JSON information into parts

Tips on organizing and designing buttons within a canvas

Transform JSON data into a CSV file using JavaScript or C# in an MVC4 framework, then import the data into

Encountering an error stating "cloudinary.uploader is undefined" while attempting to delete media files from Cloudinary

how can a select dropdown be dynamically displayed based on the previous selection?

Please note: JavaScript will not execute on Stackoverflow and will display a `securityError`. To test this code, save it locally or use a platform like jsFiddle