Delete session.storage on changing restaurant page - session

Question

I'm using Vuejs 2 and vue router to create this website.
It has a cart saved in session.storage.
I would like to delete the cart (session.storage) when the restaurant page change.
I've tried to save the slug of the restaurant and compare it to the current slug:
setSlug() {
sessionStorage.setItem("slug", this.$route.params.slug);
},
checkSlug() {
if (sessionStorage.getItem("slug") != this.$route.params.slug) {
sessionStorage.clear();
}
},
But it doesn't work.
How can I achieve this?
Thank you.
TheRestaurant.vue
export default {
name: "TheRestaurant",
data() {
return {
restaurant: {},
cart: {},
quantity: 1,
partialTotal: 0,
total: 0,
};
},
methods: {
//get the restaurant and the dishes with axios call and set the data
getRestaurant() {
axios
.get("/api/restaurants/" + this.$route.params.slug)
.then((response) => {
this.restaurant = response.data;
})
.catch((error) => {
console.log(error);
});
},
showDetails(id) {
let modal = document.getElementById("modal-" + id);
modal.classList.replace("d-none", "d-flex");
},
hideDetails(id) {
let modal = document.getElementById("modal-" + id);
modal.classList.replace("d-flex", "d-none");
},
addToCart(dish) {
if (sessionStorage.getItem("cart") == null) {
sessionStorage.setItem("cart", JSON.stringify([]));
}
let cart = JSON.parse(sessionStorage.getItem("cart"));
let index = cart.findIndex((item) => item.id == dish.id);
if (index == -1) {
dish.quantity = 1;
cart.push(dish);
} else {
cart[index].quantity++;
}
sessionStorage.setItem("cart", JSON.stringify(cart));
this.cart = JSON.parse(sessionStorage.getItem("cart"));
this.partialTotal = round(
this.cart.reduce(
(acc, dish) => acc + dish.price * dish.quantity,
0
),
2
);
sessionStorage.setItem(
"partialTotal",
JSON.stringify(this.partialTotal)
);
this.total = this.partialTotal + this.restaurant.delivery_price;
sessionStorage.setItem("total", JSON.stringify(this.total));
},
removeOneFromCart(dish) {
let cart = JSON.parse(sessionStorage.getItem("cart"));
let index = cart.findIndex((item) => item.id == dish.id);
if (index !== -1) {
cart[index].quantity--;
if (cart[index].quantity == 0) {
cart.splice(index, 1);
}
}
sessionStorage.setItem("cart", JSON.stringify(cart));
this.cart = JSON.parse(sessionStorage.getItem("cart"));
this.partialTotal = round(
this.cart.reduce(
(acc, dish) => acc + dish.price * dish.quantity,
0
),
2
);
sessionStorage.setItem(
"partialTotal",
JSON.stringify(this.partialTotal)
);
this.total = this.partialTotal + this.restaurant.delivery_price;
sessionStorage.setItem("total", JSON.stringify(this.total));
},
removeAllFromCart(dish) {
let cart = JSON.parse(sessionStorage.getItem("cart"));
let index = cart.findIndex((item) => item.id == dish.id);
if (index !== -1) {
cart.splice(index, 1);
}
sessionStorage.setItem("cart", JSON.stringify(cart));
this.cart = JSON.parse(sessionStorage.getItem("cart"));
this.partialTotal = round(
this.cart.reduce(
(acc, dish) => acc + dish.price * dish.quantity,
0
),
2
);
sessionStorage.setItem(
"partialTotal",
JSON.stringify(this.partialTotal)
);
this.total = this.partialTotal + this.restaurant.delivery_price;
sessionStorage.setItem("total", JSON.stringify(this.total));
},
},
mounted() {
this.getRestaurant();
this.cart = JSON.parse(sessionStorage.getItem("cart"));
this.partialTotal = JSON.parse(sessionStorage.getItem("partialTotal"));
this.total = JSON.parse(sessionStorage.getItem("total"));
},
};
router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Restaurant from "./pages/TheRestaurant.vue";
import Home from "./pages/TheMain.vue";
import Cart from "./pages/TheCart.vue";
import Search from "./pages/AdvancedSearch.vue";
//put all the different pages below
Vue.use(VueRouter);
/**
* #type {import("vue-router").RouteConfig[]}
*/
const routes = [
{
path: "/",
component: Home,
name: "home.index",
meta: {
title: "Deliveboo Homepage",
},
},
{
path: "/cart",
component: Cart,
name: "cart.index",
meta: {
title: "Deliveboo Cart",
},
},
{
path: "/search",
component: Search,
name: "search.index",
meta: {
title: "Deliveboo Search Restaurants",
},
},
{
path: "/:slug",
component: Restaurant,
name: "restaurant.index",
meta: {
title: "Deliveboo Restaurant",
},
},
];
const router = new VueRouter({
//it must contain an array of routes
routes,
mode: "history",
});
export default router;

Answer 1

If I understood your hierarchy and logic of components correctly,
in the mounted hook of Home and Search components you can reset your session.storage.