セッションストレージにデータを複数のデータを追加したいが、上書きされてしまいます。

Question

こんにちは、プログラミングの練習でかんたんなECサイトを作っています
現在商品一覧から商品情報をセッションストレージで取得するということを行っているのですが、
一つの商品の情報を取得しした後、別の商品を取得しようとすると、上書きされてしまいます。
getItemsする際にcartというkeyで取得したいのですが、解決するために、空の配列を作って、そこにどんどん新しく配列を追加しようとしているのですが
やり方が分からなくなってしまいました。
すでにある配列に、新しく配列を加える方法もしくは、もっとこうすると良い、などあったらご指南お願い致します。

$(document).ready(function() {
    $('#rewrite').on('click', "[data-pechace-price]", function() {
        alert("カートに追加しました");
        var product_tittle =  $(this).attr("name");
        var product_price = $(this).attr("data-pechace-price");
        var product_id = $(this).attr("data-id");
        var img_path = $(this).attr("data-img-path");
        var product_manufacture = $(this).attr("data-manufacture");
        var cart = []
        var contents = {
                title: product_tittle ,
                price: product_price,
                id: product_id,
                img: img_path,
                manufacture:product_manufacture
              }
       cart.push(contents);

    sessionStorage.setItem("cart",JSON.stringify(cart));
    });
});

Answer 1

sessionStorageのcartを取得して値が取得できるかどうか判断し、
なければ新規カートを追加、あればJSON.parseすると配列形式に戻るので、そこでpushすればいいのではと思います。

余談ですが、sessionStorage.setItem()が成功するとは限らないので
alert("カートに追加しました");のような完了メッセージはセッションストレージ格納が成功したのを確認してから出した方がいいですね。

Comments

[退会済みユーザー]

ありがとうございます、アラートの位置も修正しました。
一度getしてやらないといけなかったのですね。。。

[m.ts10806]

そうですね。あくまで文字列を格納したにすぎないのでgetして元に戻した上で追加する必要があります。
あと、カート内容の削除も起きると思いますので、その辺りも考慮が必要です（カート番号とかつけたほうがいいかも）
このやりとりが面倒な場合はセッションストレージではなくIndexDBを使ってオートインクリメントを使うという手もあります。

[退会済みユーザー]

自主的にさらっと練習で作っているくらいなので今回はカートの削除機能は見送ろうかと。。。
ただいずれやらなければならないので、書いてくださった語句は今から調べようと思います！

Answer 2

cartにgetItemsで取得した元のものと、新しいものを両方入れてあげないと、
ずっと新しいものしか入らない状態になっています。

cart.push(contents);
の前に古いものをpushしてあげましょう。

Comments

[退会済みユーザー]

ありがとうございます、古いものをプッシュするというのが意外でした。。。