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

ES6 Promises have a curious ability to accurately retrieve values from custom JavaScript objects

Next.js is constantly encountering an issue where it throws an error stating "params

What steps should I follow to run my JavaScript application locally on Linux Mint?

What is the best way to retrieve a collection of DOM elements in JSX?

What is the best way to implement filter functionality for individual columns in an Angular material table using ngFor?

What is the best way to separate a comma-delimited string in JS without including JSON data?

How to arrange a collection of objects in JavaScript

Is there a syntax error in Javascript when using a string and variable with the GET method?

Information regarding gender vanishes upon refreshing the page

Utilizing a Frozen Tensorflow Model with NodeJS for High-Performance Computing

req.body is not defined or contains no data

Iterate through a JavaScript grid and display the items

Angular Dom does not update when invoking a function within a separate component

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

What is the best way to keep an image centered in the nav-bar as it decreases in size?

An elaborate warning mechanism in Redux-observable that does not trigger an action at the conclusion of an epic

Exploring Material UI: Customizing the styling of components within TablePagination

Having trouble accessing the loadTokenizer function in Tensorflow JS

Is Javascript Profiling a feature available in Firebug Lite?

Is it safe to utilize an AngularJS filter for parsing a URL?

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

ES6 Promises have a curious ability to accurately retrieve values from custom JavaScript objects

Next.js is constantly encountering an issue where it throws an error stating "params

What steps should I follow to run my JavaScript application locally on Linux Mint?

What is the best way to retrieve a collection of DOM elements in JSX?

What is the best way to implement filter functionality for individual columns in an Angular material table using ngFor?

What is the best way to separate a comma-delimited string in JS without including JSON data?

How to arrange a collection of objects in JavaScript

Is there a syntax error in Javascript when using a string and variable with the GET method?

Information regarding gender vanishes upon refreshing the page

Utilizing a Frozen Tensorflow Model with NodeJS for High-Performance Computing

req.body is not defined or contains no data

Iterate through a JavaScript grid and display the items

Angular Dom does not update when invoking a function within a separate component

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

What is the best way to keep an image centered in the nav-bar as it decreases in size?

An elaborate warning mechanism in Redux-observable that does not trigger an action at the conclusion of an epic

Exploring Material UI: Customizing the styling of components within TablePagination

Having trouble accessing the loadTokenizer function in Tensorflow JS

Is Javascript Profiling a feature available in Firebug Lite?

Is it safe to utilize an AngularJS filter for parsing a URL?

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