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

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

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

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

Q&A

2回答

2659閲覧

jQueryを使ってセッションストレージに配列を保存したいです。

huyumin

総合スコア16

jQuery

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

0グッド

0クリップ

投稿2019/05/08 04:15

編集2022/01/12 10:55

前提・実現したいこと

jQueryを使ってセッションストレージに配列を保存したいです。

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

ボタンクリックのたびに増えるべき配列が、1つしか保存されません。

「「h6のテキストと、tagの配列」の配列」を、クリックするたびに増やしていきたいのに、それが増えてくれません。

該当のソースコード

お目汚しですが、自分なりに書いたソースコードです。

ボタンクリックで配列を「追加し続けて保存したい」と考えているのですが、何度ボタンをクリックしても「1度しか保存されない」状況です。

html

1<h6>Hello</h6> 2<ul> 3 <li>Ruby</li> 4 <li>JavaScript</li> 5 <li>PHP</li> 6</ul> 7<button type="button">Save</button>

jQuery

1$('button').click(function() { 2 3 // 現在の値 4 let current = JSON.parse( window.sessionStorage.getItem('list') ); 5 current = (current) ? current : []; 6 7 // 新しい値 8 const ttl = $('h6').text(); 9 let tags = []; 10 $('li').each(function(i, e){ 11 tags.push( $(e).text() ); 12 }); 13 const plus = { 14 'ttl': ttl, 15 'tags': tags, 16 } 17 18 // 更新する値 19 const update = $.merge(plus, current); 20 21 // セッションに保存 22 window.sessionStorage.setItem( 'list', JSON.stringify(update) ); 23 24});

試したこと

配列の連結がおかしいのかと考えまして、
「const update = $.merge(plus, current);」を
「const update = plus.concat(current);」と変えてもできず、
ほかに思い至ることができませんでした。

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

jQuery最新で、Chromeを使っています。

初心者で必要な情報など不足しているかもしれませんが、どうぞ遠慮なく仰ってください。
どうぞ宜しくお願い致します。

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

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

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

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

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

kei344

2019/05/08 04:38

tagsを増やしたいのかttlを含めたオブジェクトをたくさん詰め込みたいのかがわかりません。
huyumin

2019/05/08 04:49

すみません、後者です。「「h6のテキストと、tagの配列」の配列」を、クリックするたびに増やしていきたいです。
guest

回答2

0

kei344 2019/05/08 13:38
tagsを増やしたいのかttlを含めたオブジェクトをたくさん詰め込みたいのかがわかりません。

huyumin 2019/05/08 13:49
すみません、後者です。「「h6のテキストと、tagの配列」の配列」を、クリックするたびに増やしていきたいです。

JavaScript

1 // 更新する値 2 // const update = $.merge(plus, current); 3 current.push(plus); 4 const update = current;

投稿2019/05/08 04:54

kei344

総合スコア69366

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

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

huyumin

2019/05/08 07:08

ありがとうございます! $.merge(plus, current); というのは何がいかなかったのでしょうか?
kei344

2019/05/08 07:38

plusが配列じゃないです。mergeは配列を結合するための物では。
huyumin

2019/05/09 03:31 編集

考えたのですが、こうするのはいかがでしょうか? const plus = [{ 'ttl': ttl, 'tags': tags, }]; const update = $.merge(plus, current);
kei344

2019/05/09 03:02

JavaScriptのオブジェクトは連想配列とは違いますよ。 回答に既に書いた書き方でcurrentにオブジェクトの入った配列が出来ると思いますので、確認してみてください。
guest

0

new が予約語だからではないでしょうか。

変数名変更して再度試してみてください。

投稿2019/05/08 04:26

m.ts10806

総合スコア80765

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

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

huyumin

2019/05/08 04:33

すみません、関係なかったです。
m.ts10806

2019/05/08 04:37

何がでしょうか? 何に対して何をどう行って何が起きたかを具体的にコメントいただかないと、こちらの意図したことが伝わっているのか何が起きたのか全くわかりませんし、次の展開にうつれません。 質問のコードを変更されたようですが、そのまま変更してしまうと回答との整合性がとれなくなるのでコード修正より追記のほうが望ましいです。 「どのように対応していったか」が編集履歴見なくても流れがわかりますので。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問