質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2086閲覧

商品をクリックしたらセッションストレージに複数データを追加したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/05/27 05:29

こんにちは、商品一覧ページの商品の購入ボタンをクリックした時、セッションストレージにデータを保存したいのですが、現状のままでは、一つの商品データが入っている状態で、別商品をクリックすると上書きされてしまい、複数商品のデータを保持できません。
何か解決策を教えていただけると幸いです。

jquery

1 function change(genre_id){ 2 $.get(genreid_url+genre_id,function(data){ 3 //html書き換え 4 $('#rewrite').html(""); 5 $(data).each(function products (){ 6 //在庫0売り切れ表記 7 var stockHtml = '<div>' + this.stock + '</div>'; 8 if(this.stock==0){ 9 stockHtml = '<div class=soldOut>' +"売り切れ" + '</div>'; 10 } 11 //値段表記 12 var productPrice = String(this.price); 13 var shapingPrice = productPrice.replace( /(\d)(?=(\d{3})+(?!\d))/g, '$1,' ); 14 //DBから取得したデータを画面表示 15 $('<div class=col-md-4>' + 16 '<img src=../' + this.img_path + ' alt='+this.title+'>' + 17 '<div>' + '【商品名】' + '</div>'+ 18 '<div id="'+ this.title + '">' + this.title + '</div>'+ 19 '<div>' + '【販売元】' + '</div>'+ 20 '<div>' + this.manufacture + '</div>'+ 21 '<div>' + '【在庫数】' + '</div>'+ 22 stockHtml + 23 '<div>' + '【価格】' + '</div>'+ 24 '<div id ="' + this.id + '_price" value=' + this.price + '>' + shapingPrice + "円" + '</div>' + 25 '<a name='+ this.title + ' class="btn btn-default Js-perchaseBtn" data-pechace-price='+ this.price 26 +' data-id=' + this.id + ' data-img-path='+ this.img_path + ' data-manufacture=' + this.manufacture + ' role=button>' + '購入する' + '</a>' + 27 '</div>' ).appendTo('#rewrite') 28 }); 29 }); 30 } 31

セッションストレージの部分

jquery

1$(document).ready(function() { 2 $('#rewrite').on('click', "[data-pechace-price]", function() { 3 alert("カートに追加しました"); 4 var product_tittle = $(this).attr("name"); 5 sessionStorage.setItem("product_tittle",product_tittle); 6 7 var product_price = $(this).attr("data-pechace-price"); 8 sessionStorage.setItem("product_price",product_price); 9 10 var product_id = $(this).attr("data-id"); 11 sessionStorage.setItem("product_id",product_id); 12 13 var img_path = $(this).attr("data-img-path"); 14 sessionStorage.setItem("img_path",img_path); 15 16 var manufacture = $(this).attr("data-manufacture"); 17 sessionStorage.setItem("manufacture",manufacture); 18 }); 19}); 20

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

配列とかでデータを持つようにして、JSONに変換してからStorageに入れると良いです。

【html5のlocalStorageで複数のデータを保存するには? | Web.fla】
http://the-zombis.sakura.ne.jp/wp/blog/2012/05/12/post-1362/

【localStorageで複数のデータを保存する | Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

投稿2017/05/27 05:52

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/05/28 01:09

データの内容をリスト化し、JSON形式に変換することにしました。 リスト名を動的にすることによって、セッションストレージに保存する時データをわけられるようになりました。 ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問