画像一覧から個別ページに飛びたい

Question

前提・実現したいこと

ショッピングサイトのようなものを作成しているのですが、
商品画像をクリックすると個別ページに飛び、その画像にあった画像とテキストを表示したいです。
そこでデータベースを使わずに、jsなどで画像やテキストを保持しておいて、クリックイベントでその画像をクリックすると個別ページが完成されるようなシステムを作りたいのですが、可能でしょうか？

追記
デモサイトのようなものを作っており、実際に商品を管理してるわけではありません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html

最初のページ(index.html)※ここでは画像一つですが、実際は何個も画像があります。

<a href="goods.html"><img src="https://www.ikea.com/jp/ja/images/products/lack-coffee-table-black-brown__57537_pe163119_s5.jpg?f=s"></a>

遷移先のページ(goods.html)

<div class="goods"> <div class="goods-image" id="goodsImage"> <img id="img"> </div> <div class="goods-text" id="goodsText"> <p id="name"></p> <p id="price"></p> <p id="content"></p> </div> </div>

js

class ClickImage {
constructor(image, name, price, content) {
this.image = image;
this.name = name;
this.price = price;
this.content = content;
}
click() {
const goodsImage = document.getElementById('goodsImage');
const goodsText = document.getElementById('goodsText');
const img = document.getElementById('img');
const name = document.getElementById('name');
const price = document.getElementById('price');
const content = document.getElementById('content');
img.src = this.image;
name.textContent = this.name;
price.textContent = this.price;
content.textContent = this.content;
}
}

const clickImage = new ClickImage("https://www.ikea.com/jp/ja/images/products/lack-coffee-table-black-brown__57537_pe163119_s5.jpg?f=s", "椅子", "10000円", "tetetetetetetetet");
const clickImage1 = new ClickImage("https://img.tabroom.jp/img/brand/brd00308/itm0028275/is4_5c7623eab5f02bde8749c2a1f4e48536.jpg", "椅子", "5000円", "tetetetetetetetet");

試したこと

index.html上でimgタグにonclick="clickImage.click()"など試してみたが、遷移先のページでは、何も表示されませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

そもそもどのように商品を管理しているのでしょうか。

Answer 1

JavaScript はページ単位でしか動かないです。
リンクなどによってページを移動すると、前のページのJavaScriptの実行は中止され新しい環境になるので、定義した変数や関数などもすべて捨てられます。

ですので、ページ間で動作を共同させようとするのであれば、何らかの方法でその情報を次のページに伝えなくてはいけないです。
サーバを使わずにこれを行いたいのであれば、フラグメントなどでURLに埋めるか、cookieなどのローカルストレージを利用するぐらいしか方法はないでしょう。

フラグメント | ウェブ上のリソースの識別 - HTTP | MDN

Window.localStorage - Web API | MDN

---

なお、ご存知かと思いますが、決済をローカルだけで実現するのは無理なので、外部サービスに頼らない限りこれでできるのはあくまで「ショッピングサイトのようなもの」であって、ショッピングサイトを作ることはできません。念のため。

Comments

[yaise]

やはり厳しいですよね。
ご回答ありがとうございます。